Why does my text align in Safari and Chrome but not Internet Explorer/Firefox?
My website is wordswithfriends.net
In Safari/Chrom开发者_C百科e in the sidebar e.g. "Monthly Countdown" the headers and text lineup exactly. In IE/Firefox the header is more to the right and the text is pushed all the way to the left. What is wrong with my code?
Edit css:
#sidebar h3 {
background: url (images/sidebarh3bgr.png) no repeat;
color: white;
font-size: 14px;
margin: 0 0 10px;
padding: 5px 5px 5px 18px;
}
#sidebar li .top {
padding: 0px 0px 15px 1px;
width: 333px;
background: no-repeat url(images/bcksidebarlitop.png);
}
.execphpwidget {
margin: 10px 23px 0px 10px;
padding: 5px 5px 5px 10px;
}
.textwidget {
padding: 5px 5px 5px 17px;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 3px 17px;
}
Firebug in Firefox and Developer Tools in IE both show that the style defined for your class*.execphpwidget
is not being applied. Neither inspection method indicates that the style is being overridden; it's just not present.
A quick validation of your style sheet shows that you have some bad CSS towards the end, around line 470:
img .alignnone size-full wp-image-364 {float:right; padding:5px 10px 10px 0px;"}
See here: W3C CSS Validation Service
Because of this error, IE and Firefox are discarding the remainder of your style sheet, which includes the left padding/margin that you are missing.
I guess Chrome and Safari are more forgiving.
Css-reset is the magic word :-)
Every Browser has his own default CSS. Thats one of the biggest problems for web developer.
For example a CSS-Reset sets many properties to 0px (margin:0;padding:0;
)
精彩评论