swa66
msg:3947950 | 9:47 pm on Jul 7, 2009 (gmt 0) |
Welcome to WebmasterWorld! I'd first make sure my html and css fully validate, that's always a good start.
|
cyberpunkstudio
msg:3947983 | 10:56 pm on Jul 7, 2009 (gmt 0) |
Thanks, Yes I have validated it, first thing I did. Do you have any solutions to my problem?
|
swa66
msg:3947984 | 11:11 pm on Jul 7, 2009 (gmt 0) |
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 ...
|
cyberpunkstudio
msg:3947998 | 11:48 pm on Jul 7, 2009 (gmt 0) |
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]
|
DrDoc
msg:3948035 | 1:54 am on Jul 8, 2009 (gmt 0) |
A) throw a border on your logo, see if the border is overlapped as well
B1) if yes, fiddle with z-index
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]
|
cyberpunkstudio
msg:3948315 | 10:46 am on Jul 8, 2009 (gmt 0) |
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?
|
SuzyUK
msg:3948319 | 10:55 am on Jul 8, 2009 (gmt 0) |
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 thanks 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]
|
cyberpunkstudio
msg:3948324 | 11:10 am on Jul 8, 2009 (gmt 0) |
The HTML is displayed above but here it is: [codes]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> </head> <body> <div id="header"> <h1 id="logo"><a href="" title="Publishing Comics"><img src="" alt="Publishing Comics" width="203" height="195" /></a></h1>
<div id="header_banner">
<a href="" rel="external" title="Comic Book Resources"><img src="" alt="Comic Book Resources" width="728" height="90" /></a></div> <div id="header_network">
<a href=""><img src="" alt="Network" width="119" height="25" /></a>
</div>
<div id="header_search">
<form method="get" id="searchform" action="/">
<input type="text" value="" name="s" id="s" size="15" />
<input type="submit" id="search_submit" value="Search" />
</form>
</div> </div> <div id="menu_wrap">
<div id="menu">
<div id="nav_wrap">
<ul id="nav">
<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>
</ul>
</div>
</div>
</div> </body> </html>
[/code] The CSS:
div#header {
width:990px;
height:143px;
margin:0 auto;
position:relative;
background:transparent url(images/header-bk.png) no-repeat left bottom;
}
h1#logo,
h2#logo {
position:absolute;
bottom:-80px;
left:21px;
}#menu_wrap {
height:45px;
background:url(images/menu-bk.gif) repeat-x scroll center top;
font-weight:bold;
font-size:1.5em;
font-family:Comic Sans MS,Comic Sans, cursive;
text-transform:uppercase;
}
div#menu {
width:973px;
min-height:1%;
margin:0 auto;
padding:0;
}div#nav_wrap {
float:right;
height:39px;
padding:0;
margin:0 0 0 40px;
}
#nav {
margin:0;
padding:3px 0 3px 0;
height:39px;
list-style:none;
white-space:nowrap;
text-align:left;
float:left;
}
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
|
SuzyUK
msg:3948348 | 12:00 pm on Jul 8, 2009 (gmt 0) |
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
|
cyberpunkstudio
msg:3948381 | 12:45 pm on Jul 8, 2009 (gmt 0) |
Hi sorry I didnt notice I had messages in my inbox. I have just PM you as well. Hope you can help
|
LouiseMarie
msg:3949962 | 11:42 am on Jul 10, 2009 (gmt 0) |
hi, 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?
|
cyberpunkstudio
msg:3949964 | 11:46 am on Jul 10, 2009 (gmt 0) |
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 :-)
|
LouiseMarie
msg:3949969 | 11:48 am on Jul 10, 2009 (gmt 0) |
glad you figured it out :D
|
|
