Welcome to WebmasterWorld!
I'd first make sure my html and css fully validate, that's always a good start.
Thanks, Yes I have validated it, first thing I did.
Do you have any solutions to my problem?
Hmm, the CSS validator over at [jigsaw.w3.org...] does indeed not see any problems with "font-family:Comic Sans MS,Comic Sans, cursive; "
But I would still write it as
|font-family: "Comic Sans MS", "Comic Sans", cursive; |
The other one that worried me is :
While that's valid CSS, any single html document can only have at most *one* element with any given id.
It would help to specify what versions of IE are causing you grief. And describe the problem in a bit more detail ...
Hi sorry yes I should be more clearer to what the problem is.
I have provided an image of what the website should look like in Firefox and all the other browsers:
But in IE6 the logo which uses absolute positioning is overlapped by the navigation:
Hope this is clear, I cant understand why it only happens in IE6. I heard I should use a negative margin but I dont really understand how.
hope you can help, thanks
[edited by: SuzyUK at 4:57 am (utc) on July 8, 2009]
[edit reason] no URIs per Charter [WebmasterWorld.com] [/edit]
A) throw a border on your logo, see if the border is overlapped as well
B1) if yes, fiddle with
B2) if no, it's the size of the logo's container that's somehow getting messed up in IE
Are you using a full doctype? And, which versions of IE are we talking? Only IE6, or IE7/8 as well?
[edited by: DrDoc at 1:55 am (utc) on July 8, 2009]
I already tried using z-index but it still doesn't work :-(
I am using a full doctype: XHTML 1.0 Transitional as usual.
The problem seems to be only in IE6 and no other browsers. I hate IE6 so much makes life so difficult.
Do you have any other ideas why this maybe happening?
ideas = Yes, it's very likely a hasLayout /position relative/ stacking order bug..
If you could post the HTML and CSS for just your header and navigation, we don't need the Logo image, just its size would be good.. also tell us the Doctype you're using please - We would be able to help you find the easiest solution for your case
sorry I didn't notice you'd already posted doctype, the code too please ;)
[edited by: SuzyUK at 10:56 am (utc) on July 8, 2009]
The HTML is displayed above but here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h1 id="logo"><a href="" title="Publishing Comics"><img src="" alt="Publishing Comics" width="203" height="195" /></a></h1>
<a href="" rel="external" title="Comic Book Resources"><img src="" alt="Comic Book Resources" width="728" height="90" /></a></div>
<a href=""><img src="" alt="Network" width="119" height="25" /></a>
<form method="get" id="searchform" action="/">
<input type="text" value="" name="s" id="s" size="15" />
<input type="submit" id="search_submit" value="Search" />
<li class="page_item current_page_item"><a href="" title="Home - Read our Blog">Blog</a></li>
<li class="page_item page-item-2"><a href="" title="About">About</a></li>
<li class="page_item page-item-51"><a href="" title="Create Comic Books">Create Comic Books</a></li>
<li class="page_item page-item-34"><a href="" title="Freebies">Freebies</a></li>
<li class="page_item page-item-29"><a href="" title="Store">Store</a></li>
<li class="page_item page-item-56"><a href="" title="Community">Community</a></li>
<li class="page_item page-item-31"><a href="" title="Links">Links</a></li>
background:transparent url(images/header-bk.png) no-repeat left bottom;
background:url(images/menu-bk.gif) repeat-x scroll center top;
font-family:Comic Sans MS,Comic Sans, cursive;
margin:0 0 0 40px;
padding:3px 0 3px 0;
If you need anything else please let me know. Dont know why but everytime I insert an image on this forum it gets removed.
Thanks for the help
Hi again.. sorry my bad, have been sending you PM's about the links/images and as mentioned in them the code isn't quite enough to recreate the problem - (check your sticky mail for more info, link beside your user name at top)
I have tried this code and it's not showing the IE6 problem, but I believe you (and I did see the screenshots shhh) and it is a known IE6 issue, just need to see exactly which bits of both your header and nav code are floated and/or relatively positioned
Hi sorry I didnt notice I had messages in my inbox. I have just PM you as well.
Hope you can help
Just incase you haven't figured out a fix for this yet, I recently found out that IE6 doesn't like absolute positioned divs.
Is it possible you could change the position to relative and then use minus margins to position it in the correct place if required?
Hi I have discovered the problem it was acutally the IE filter that was cutting off my logo.
I did try negative margin but that just pushes everything down.
Thanks for everyones help :-)
glad you figured it out :D