CSS Problem On Layout
Hoping someone can help me out (new on this forum so hi to all). I am a freelance designer who is working on a project for a client - all but finished apart from two issues on it - click the following text if you fancy having a look: Test website.
Problems listed below:
- In IE6 I get a funny re-occurring background image at the bottom of the layout, it is just below the second green round edged box with the white text in, haven;t got a clue why this has appeared!
- The second problem is a funny one, in firefox 2 on Mac and PC the top tabs sit away from the left hand side... in IE6 (funnily) they appear how I want them too! Not checked the page in IE7 yet as I do not have it on my PC unfortunately.
If anyone has any ideas I'd be really grateful for any help at all. Cheers.
caffinephil posted this at 13:59 — 25th February 2008.
They have: 99 posts
Joined: Feb 2008
Hello and welcome to the forum.
In IE7 the tabs appear to be left aligned and not indented, I don't see the re-occuring bg image in either Firefox or IE 7 either.
webwiz posted this at 17:53 — 25th February 2008.
He has: 629 posts
Joined: May 2007
Just a couple of ideas before I set out -
The repeating image may be due to comments. I don't have time to test, but try taking out some of the comments, or butt them up against the nearest tags like this:
</div><!-- this is the comment -->
As for the gap to the left of the tabs, that is due to IE using margins as space for bullets, while others use padding. You have zeroed the margin - try zero padding as well.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
JeevesBond posted this at 20:38 — 25th February 2008.
He has: 3,956 posts
Joined: Jun 2002
This isn't an issue in IE7. I would suggest--as a test--removing the
). If that gets rid of the repeating background, it may be something to do with padding/margins on the
<br />tags from inside that.left-green-column(which is an awful name for a class, by the way: what happens if you change the design and make that box red and on the right?<br />tags. Also try removing any comments, or removing white-space around them, as David suggested.The tabs are flush left on IE7, in fact everything seems to look as you want it in IE7. As David suggested: add
padding: 0;to#navigation { ... }and the menu will be flush left in all standards compliant browsers too.Things are always a bit hit-and-miss when it comes to Internet Explorer. Personally I design and code using Firefox (and the beloved Firebug) and Opera, then worry about IE afterwards. It always needs IE-specific hacks you see.
Welcome to the forums!
a Padded Cell our articles site!
webwiz posted this at 21:36 — 25th February 2008.
He has: 629 posts
Joined: May 2007
Okay. I'm on break at work and checked out my hypothesis. Here's what I found:
My suggestion re: comments did not work, but deleting all HTML comments removed the "ghost image" in IE 5 and 6.
JeevesBond is right- adding "padding: 0;" to the rule for #navigation works. It also prevents the menu from breaking into two lines in IE 6 and 7 here, but not in IE 5.5 (if you care).
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.