...

View Full Version : RESOLVED Div Is Out of Place



jihanemo
11-04-2009, 07:51 PM
Div appears out of place on all browsers.

In FF 3.5.4, when I click on the "Free Shipping" button at the bottom of the .sidebar div, the .content moves out of place and drops down below the sidebar but above the .footer div...

In IE8, the page loads with the .content div already out of place and appears below the .sidebar div and above the .footer div...

How can I fix this? Is there something wrong with the widths of the .sidebar and .content divs? I calculated widths including borders and it looks like everything adds up...

http://www.americanchic.net/help

SB65
11-04-2009, 08:09 PM
In FF, it's the default outline on :active that seems to be causing the problem.
Try adding:


a:active, a:focus{outline:none}

to your css.

I see your problem in IE8 although it's OK in IE7 (fantastic...:rolleyes:). The float drop is caused by the scrollbar which appears in IE8, coming from overflow:auto on #contentwrapper. I'm not sure you need this - have a try with removing it.


Div appears out of place on all browsers.

Not sure what you mean by this...

Excavator
11-04-2009, 08:17 PM
Hello jihanemo,
What happens if you don't float .content?
Like this -

div.sidebar {

width: 154px;
float: left;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #999999;
padding: 0;
margin: 0;

}

div.content {

padding: 0;
margin: 0 0 0 155px;

}


div.footer {

overflow: auto;
clear: both;
.contentwrapper is containing floats that do not clear if you remove overflow:auto; If SB65's suggestion works for you, you could try clearing them with another method. See this page (http://www.positioniseverything.net/easyclearing.html)for a different approach to clearing floats.

jihanemo
11-04-2009, 11:59 PM
Excellent. It's working like a charm now. I used a mixture of both of your suggestions...

I removed overflow:auto from div contentwrapper...

...and I removed the float from the div wrapper and added 155px to left margin.

Thanks, guys!

When I said Div appears out of place on all browsers. , I meant that it appeared out of place in all major browsers (FF, Chrome, IE, AOL... those are the only ones that I test. Not sure if I'm missing any. Oooo, wait, I should probably download Safari...).

jihanemo
11-05-2009, 02:31 AM
Okay... I thought I was in the clear. Now the div.contentwrapper is doing something funny. It seems as if the div.contentwrapper is overlapping the div.sidebar and the div.content. In the middle of the sidebar, underneath the "Safe and Secure" image and directly underneath the "Our Privacy Policy" link, you'll see a grey line - that belongs to the bottom border of the div.contentwrapper... :mad: The contentwrapper should be stretch the entire height of the div.sidebar and div.content (of course, because sidebar and content are supposed to be contained within contentwrapper)... I don't know what went wrong...

karlosio
11-05-2009, 02:52 AM
Oooo, wait, I should probably download Safari...).

Theres also Opera (www.opera.com/download/) :)

SB65
11-05-2009, 07:37 AM
The contentwrapper should be stretch the entire height of the div.sidebar and div.content (of course, because sidebar and content are supposed to be contained within contentwrapper)... I don't know what went wrong...

Ok, you do need to clear the floats on .contentwrapper then. Just had a play around with IE8....

If you reinstate overflow:auto on .contwrapper, and additionally add


.sidebar img{display:block}

I think that fixes IE8.

jihanemo
11-05-2009, 11:58 PM
Thank you! That sort of fixes it. But scroll bars appear in FF when I click on the bottom sidebar "free shipping" button. I'm beginning to wonder if I set this up all wrong.

SB65
11-06-2009, 07:46 AM
That's FF applying its default outline on :active links. Try adding:


a:active, a:focus{outline:none}

jihanemo
11-06-2009, 10:09 AM
Thank you!

Somehow, after I added that code, the footer popped into the bottom table (cscontent) within the div.content:

http://www.americanchic.net/help

??

abduraooft
11-06-2009, 10:25 AM
Do you have any reason to use tables for your lay-outing? I'd recommend you to remove them and replace with suitable (semantic) elements, which would resolve a lot of issues.

The total width given to div.content is just 694px, where as those 6 images in the footer of right column has a total width > 800px.

SB65
11-06-2009, 10:37 AM
I think it's that second table you've added -.cscontent - that's causing your issue, not that css change. As abduraooft points out, it's too wide to fit in your layout.

jihanemo
11-06-2009, 04:47 PM
Do you have any reason to use tables for your lay-outing? I'd recommend you to remove them and replace with suitable (semantic) elements, which would resolve a lot of issues.

The total width given to div.content is just 694px, where as those 6 images in the footer of right column has a total width > 800px.

I'm using a table within the div.content because it's the best way to section off those top for customer service menus. I planned on using the tables anyway to section off area for the actual product category pages and individual product pages. What are semantic elements? I thought I was using these tables appropriately. I've used divs to section off my header, content area, sidebar, and footer. Is it a good idea to remove the table from the div.content entirely? I've removed the 2nd table because it really isn't necessary. But should I really remove it altogether?

The footer with those 6 images (and everything below) actually shouldn't be inside that table (which is inside the div.content) at all. It should be laying under the div.contentwrapper entirely. I'm trying to figure out how it popped up into the content div...

http://americanchic.net/help.html

SB65
11-06-2009, 05:19 PM
I'd guess you're missing a closing tag somewhere in your markup. If you have a look at your validation errors (http://validator.w3.org/check?uri=http://americanchic.net/help.html) you might find the problem.

jihanemo
11-06-2009, 06:47 PM
Of course. Thank you. I'll do that. Someone described the validator as a sort of spell-check... I keep forgetting.


Okay - 36 errors... I'll look through them now. Thank you for the tip.

Excavator
11-06-2009, 06:51 PM
Someone described the validator as a sort of spell-check...

Hey buddy - That's splelchecker to you!

hahahaaha:D

jihanemo
11-06-2009, 06:57 PM
lol! That cheered me up. :)

jihanemo
11-06-2009, 07:14 PM
I fixed the warning which required me to remove "/" from the end of elements but I'm just stuck on this error (I'm getting a lot of these errors):


Line 239, Column 73: document type does not allow element "A" here

f="http://twitter.com/celebritychic"> <img class="footerblocksocialfirst" src=


(on this page: http://americanchic.net/help.html )

jihanemo
11-06-2009, 08:36 PM
Okay. Fixed most of it. It's amazing how one little missing quote mark can create 31 errors...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum