lixtifur Posted January 19, 2009 Report Share Posted January 19, 2009 I have been working on a (www .el vitrading.net/NICKSART) website and have noticed a few differences among web browsers. The website I have created looks exactly how I intended it to look with FireFox. Both versions of IE have some problems. IE6 has more problems then IE7. -I have a line underneath the first h2 element(About Nick...) that does not even appear. (it is an inline style -top border) -Inner_right is an ID selector and its border-left property does not even appear on About Nick page(index.html) -I have hyper links that are styled with pseudo selectors. The color property has a value of inherited(The color would come from a class selector-menubox). The inherited color is not there. -The amont of space between "About Nick" (h2 element) and the line underneath(on gallery and contact pages) is different in IE. -The footer has no border in IE -In IE6 my brown margin is not correct. Firefox and Opera are fine. This website was validated XHTML and CSS. What do web designers/developers do in when browswers have different standards? Thank you Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 19, 2009 Report Share Posted January 19, 2009 (edited) For the dotted top border create a space in the style before the color:- Same with footer:- #footer { clear:both; width:100%; background-color:#EED8B3; color: #48381F; font-size: 10px; border-top:1px solid #48381F; border-bottom:1px solid #48381F; text-align: right; } Same for inner_right:- #inner_right { float:right; margin-top:0; width:155px; overflow:hidden; padding:2px; border-left:1px dotted #A8A8A8; position:relative } At the moment your hover color #48381F; (brown) in menubox a:hover is working in Firefox and in IE7. .menubox a:link and .menubox a:visited have color:inherit; which comes from .menubox which is #EDE0BE (cream) so that is working in Firefox but IE7 does not operate inherit for color, only background-color so edit:- .menubox a:link { display:block; width:154px; color:#EDE0BE;/*inherit;*/ background-color:inherit; font-size: 12px; text-decoration:none; } .menubox a:visited { display:block; background-color:inherit; color:#EDE0BE;/*inherit;*/ width:154px; font-size: 12px; text-decoration:none; } -The amont of space between "About Nick" (h2 element) and the line underneath(on gallery and contact pages) is different in IE. It's the same on the index page (after curing the dotted top border); you have converted h2 from a block element to an inline element with display: inline and it has lost the default margins. If you want to leave it as an inline element add a line-height 1.3 or 1.4:- h2 { line-height: 1.3; color:#48381F; background-color:inherit; font-size: 22px; display:inline; } If you want the small image blocks.gif to be on the same line as the h2 heading, edit the markup to add display: inline like the h2:- About Nick... Edit the Gallery and Contact pages the same way. (If you delete the display: inline to turn it back into a block element, add margin-bottom: 4px; instead of the line-height, but then you may have positioning problems with the image blocks.gif which is just before it, so I found it best to do the display inline edits above.) I can see that the patterned background shows on the right in IE6; cancel the default body margin (20px) which seems to be the problem:- body { background-image: url("images/body_bk.jpg"); background-color:inherit; color: #48381F; margin: 0; } why have you got #wrap as position: absolute? I don't think it needs to be. You can also delete position: absolute as well as adding the above body margin: 0; but it doesn't seem to be necessary to do this:- #wrap { top:0; left:0; width:100%; font: 14px/16px Arial, Helvetica, sans-serif; /*position:absolute;*/ } Edited January 19, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
lixtifur Posted January 19, 2009 Author Report Share Posted January 19, 2009 Hello Wickham, Thank you for helping me find solutions. There is still that one problem I have with the brown margin on the left side(only in IE6). The width is set at 155px, the right margin of the right side is 155px -Everything looks good to me. What could be wrong? Thank you for your help, lixtifur Quote Link to comment Share on other sites More sharing options...
virtual Posted January 19, 2009 Report Share Posted January 19, 2009 May I make a little design suggestion while you are still in the testing stage. It would look more balanced if the palette and its background colour in the header image lined up with the navigation column. For the moment they are offset. They could also both do with being a little wider. More like 1/3 - 2/3 ratio, I believe the optimal ratio is 3/8ths to 5/8ths for a 2 column layout. The navigation links could do with being a little larger and better spaced, they don't stand out enough and are smaller than the general text. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 19, 2009 Report Share Posted January 19, 2009 Remove I never know why some websites have this above the doctype, it always seems to cause problems. IE7 and Firefox are unaffected. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.