Layout Trouble (HELP Please!)

[Suiside360]

LLA WordPress Template (http://testwp.dreamhosters.com/)

My troubles start when I get into IE 7. The Navigation gets all kinds of crazy. Is this a common IE 7 issue that's easy to fix or did I stumble upon something new?

[fasterthanlight™]

You should post a screen shot of how it looks in IE7, could be a simple problem, could be complicated, either way, its good to know what us helpers are getting ourselves into before we waste a bunch of time opening up another program :D :thumb:

[Suiside360]

Here's how it should look.

(firefox)
http://www.briancarr.com/stuff/Firefox.jpg

Here's how it looks in IE7

(Internet Explorer 7)
http://www.briancarr.com/stuff/ieseven.png

Notice how the content blocks the nav.

[broneah]

Different browsers display items differently because of the default css properties assigned to them by the browser. It is a tricky task but can be done. Change your div display settings, set the position to absolute and give it an x y pos using top and left or right.

ex:

.contextmenu
{
font-family:arial, 'verenda';
font-size:11px;
color:white;
background-color:#e48914;
padding:9px;
float:left;
display:none;
position:absolute;
cursor:pointer;
text-align:center;
height: 22px;
}

CSS Cheat sheet wizard.
http://www.methodarts.com/downloads/

[simplistik]

I haven't looked at your site, but in repsonse to the post above me... DO NOT DO ABSOLUTE POSITIONING. It's a cheap hack, when used like that.

my guess is that you more than likely need to clear the float of your navigation.

add this to your css,



.clear { height: 1%; margin: 0; padding: 0; clear: both; }

then after your nav div or UL (hopefully a ul) put


<br class="clear"/>

[Suiside360]

I'll try your fix tomorrow at work.

The absolute positioning hack might be a quick fix now but I've learned through experience that it can really f*ck sh*t up later. That's for the suggestion though.

[broneah]

Then set it relative, and code more.

[simplistik]

I took a peep at your CSS, you should be able to remove float: left; from #nav and it should work fine. There's no reason that should be floating anyway... since there's nothing next to it and the next object you have just drops down anyway.


Then set it relative, and code more.
Takes more coding to absolutely position something than it does to relatively position something.

[Suiside360]

ex:

.contextmenu
{
font-family:arial, 'verenda';
font-size:11px;
color:white;
background-color:#e48914;
padding:9px;
float:left;
display:none;
position:absolute;
cursor:pointer;
text-align:center;
height: 22px;
}


Honestly, I've never needed that much CSS script to position something before.

As for the float:left. What you said makes sense, but I think I had that there for a reason. I'll play around with it and hopefully it doesn't ruin anything. Thanks for the help.

[anardodesign]

Hispanics! YEAAAAAAAAAAAAAAAA! Pollo Power! HAHAH

[Suiside360]

I took a peep at your CSS, you should be able to remove float: left; from #nav and it should work fine. There's no reason that should be floating anyway... since there's nothing next to it and the next object you have just drops down anyway.


Takes more coding to absolutely position something than it does to relatively position something.

Unfortunately your methods didn't fix the problem. Do you have any other ideas as to how to get this to work?