PDA

View Full Version : IE Positioning Problem...


Rob_Che
07-17-2008, 09:37 AM
Hey guys... long time no see... Hoep you're all well...

Got a silly one for you... Sites here:
blog.doncasterlivemag.co.uk (http://blog.doncasterlivemag.co.uk)
www.doncasterlivemag.co.uk (http://www.doncasterlivemag.co.uk)

If you look at the nav buttons in IE6 you can see that the Buttons are correctly placed (ish) in the Blog but are at the top of the DIV on the general site... any ideas ?

Second thing is the search box on the Blog in IE is not correctly placed... it eats into the previous DIV... I've had this issue previously and needed to add a height to the previous div for it to recognise it... bit stuck on that... :confused:

Any help, as always, appreciated !

Rob

Cary
07-18-2008, 06:45 AM
Hi Rob,

If you look at the nav buttons in IE6 you can see that the Buttons are correctly placed (ish) in the Blog...

This is due to IE6's doubled margin float bug. You are floating the divs in the same direction as their side margins so the margins are being doubled. The display:inline styling fixes it.

#main-nav #blog-button {
float: left;
margin-left: 12px;
display: inline;
}
#main-nav #archive-button {
float: left;
margin-left: 44px;
display: inline;
}
#main-nav #contact-button {
float: left;
margin-left: 18px;
display: inline;
}

...but are at the top of the DIV on the general site... any ideas?

I couldn't see any nav buttons on the general site page.

Second thing is the search box on the Blog in IE is not correctly placed...

First thing you need to do is fix a couple things in the html.

You have two header divs.

<div id="header">

<div id="header">
<div id="main-nav">
<div class="nav-buttons"><div id=blog-button><a href="http://blog.doncasterlivemag.co.uk">BLOG</a></div></div>
<div class="nav-buttons"><div id=archive-button><a href="#">ARCHIVE</a></div></div>
<div class="nav-buttons"><div id=contact-button><a href="#">CONTACT</a></div></div>
</div>
</div>

</div>

Just remove one of them since you can't use an ID more than once per page.

The search form should also come after the list it's following, but it's actually contained within the list since the closing ul tag appears after the form.

<div id="searchbox">
<form id="searchform" padding: "none"; method="get" action="http://blog.doncasterlivemag.co.uk">
<input type="text" name="s" id="s" size="16" />
<input type="submit" value="GO!" class="btn" />
</form>
</div>

</ul>

Just move the closing ul tag ahead of div#searchbox.

Here's the CSS I changed:

#sidebar form {
height: 51px; /* Subtracted the 31px top padding from the 82px height. */
width: 212px;
border: 0px;
background: url(http://www.doncasterlivemag.co.uk/images/wordpress/search-bg.gif);
padding: 31px 0 0; /* Just so the inputs would appear roughly at the correct position before messing with their top margins. */
}
#sidebar input {
background-color: white;
display: inline;
border: none;
color: #663333;
font-size: 14px;
padding: 0px;
margin: 3px 0 0 26px;
float: left;
}
#sidebar input.btn {
margin: 0 20px 0 0;
float: right;
}

Rob_Che
07-19-2008, 12:39 AM
Legend. Every one a winner.

Night of stress and you sum it up so easily... Cheers Cary !