开发者

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;)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜