PDA

View Full Version : Broken flow on inner Divs?



flynch01
Jan 26th, 2009, 01:22 AM
First the page for reference

(Yeah yeah divitus)

http://neetlife.co.uk/final/index.html

Problem is with the bar at the top. So you don't have to read the entire html file (I havn't seperated the styles into a stylesheet yet) here's the relevant parts:



<div id="TBarO">
<div id="TBar">
<div class="TBarButton">Messages</div>
<div class="TBarButton">Client</div>
LOGIN
</div><b class="B1"></b><b class="B2"></b><b class="B3"></b>
</div>


And the CSS behind it:



#TBarO {
margin-left: -400px;
left: 50%;
width: 800px;
position: relative;
margin-bottom: 30px;
} #TBar {
border: 1px solid black;
border-bottom: 0px;
border-top: 0px;
background: #283438;
padding: 6px 20px 3px 10px;
color: white;
}
.TBarButton {
display: block;
background: #222;
width: 120px;
float: right;
height: 24px;
margin-top: -5px;
text-align: center;
line-height: 24px;
border-right: 1px solid #444;
color: #777;
} .TBarButton:hover {
color: white;
cursor: pointer;
}
b.B1, b.B2, b.B3 {
display: block;
height: 1px;
background: #283438;
clear: none;
} b.B1 {
height: 2px;
margin: 0px 1px 0px 1px;
border-left: 1px solid black;
border-right: 1px solid black;
} b.B2 {
margin: 0px 2px 0px 2px;
border-left: 2px solid black;
border-right: 2px solid black;
} b.B3 {
margin: 0px 4px 0px 4px;
background: black;
}


Basically because the bar height is set, I figured extending the size of the buttons would allow it to go past the limits of the div, and cover part of the <b> elements which are creating the curve. It does work, in all browsers except IE7 (I don't care about IE6< anymore, just don't care). In IE7 though the divs extended size is effecting the width of the b elements below even though they are outside the TBar div. I'm not sure what's breaking and where so... yeah. Help is appreciated :<

oesxyl
Jan 26th, 2009, 07:14 AM
#TBarO {
margin-left: -400px;
left: 50%;
width: 800px;
position: relative;
margin: 0 auto;
margin-bottom: 30px;
}

remove yellow, add blue, :)
same effect but without negative margins. Is better in my opinion to close all your content into a wrapper div, put a width 800px and center it using position: relative and margin: auto and then style the inner elements.

best regards

flynch01
Jan 26th, 2009, 03:20 PM
Thanks for the tip, didn't know that :>, how does that actually work? I don't understand how it's being centred but I will use it for centering from now on.

Anyway it didn't fix the issue. Here's a screenshot of what I'm talking about:

http://i40.tinypic.com/4r7om0.png

Highlighted:
http://i41.tinypic.com/2r27ij8.png

Notice how the b tags are hitting the overstretched divs, and stopping.

oesxyl
Jan 26th, 2009, 03:43 PM
Thanks for the tip, didn't know that :>, how does that actually work? I don't understand how it's being centred but I will use it for centering from now on.

Anyway it didn't fix the issue. Here's a screenshot of what I'm talking about:

http://i40.tinypic.com/4r7om0.png

Highlighted:
http://i41.tinypic.com/2r27ij8.png

Notice how the b tags are hitting the overstretched divs, and stopping.
clear the float using:



#TBar {
overflow: auto;
}


it looks fine but it's hard to read, contrast is too tow
best regards

jerry62704
Jan 26th, 2009, 03:45 PM
Content0 should have it's height removed.

I believe IE6 has about 25% of all internet usage. Why would you want to exclude them?

flynch01
Jan 26th, 2009, 06:11 PM
#TBar {
overflow: auto;
}

http://i39.tinypic.com/112bhhe.png

Didn't fix it, also I'll try and contrast the colors a bit better. Also If I'm thinking right as to what you were trying to do there. I want the buttons to hang outside, I just don't want the b tags to be affected by them.

Edit:


Content0 should have it's height removed.

I believe IE6 has about 25% of all internet usage. Why would you want to exclude them?

Content0 is just the shaded bar accross the page. I like it like that. Also, I'm not trying to target all internet users, I figure the only people who will visit the site will be people not even using IE seeing as I just intend to put things I've written on there. Like userscripts and such. If someone is browsing it in IE6, I doubt the person would be there very long anyway.

oesxyl
Jan 26th, 2009, 06:35 PM
line-height must be less then height, because the text must fit inside the box and that is the reason why the scrollbar apear in the box when you use overflow: auto.
when you use float you must clear them some way, overflow auto is one way else the parent don't know what size have the inner elements.
Another way is to use clear: both after last element.

http://www.quirksmode.org/css/clearing.html

or instead of using float and display block you can use display inline.

best regards

flynch01
Jan 26th, 2009, 06:54 PM
Even if I didn't, the b tags will still be stopped by the hanging divs. Also I know about clearing I am purposefully not doing it here so that the divs DO drop out of the bar, you can see why in this screenshot where I'm clearing it.
http://i44.tinypic.com/e03hol.png

I think you're still missing what I'm trying to do. I don't want to clear the divs, I WANT them to drop below the #TBar div, I want them to break out of flow, what my problem is that the 1px high b elements are being effected by the hanging divs stopping them from being 100% of the width of the div. I think it's the contrast that's stopping you from seeing, I'll have to work on that but here's a brightened image of the problem:

http://i44.tinypic.com/30mu0s4.png

Firefox, and Webkit browsers display it properly. IE8 does as well. IE7 however, the b divs width is being shortened by hitting the dropping divs.

Edit:

Here's a screenshot of how it should look.

http://i42.tinypic.com/14b6mtf.png

oesxyl
Jan 26th, 2009, 07:13 PM
Even if I didn't, the b tags will still be stopped by the hanging divs. Also I know about clearing I am purposefully not doing it here so that the divs DO drop out of the bar, you can see why in this screenshot where I'm clearing it.
http://i44.tinypic.com/e03hol.png

I think you're still missing what I'm trying to do. I don't want to clear the divs, I WANT them to drop below the #TBar div, I want them to break out of flow, what my problem is that the 1px high b elements are being effected by the hanging divs stopping them from being 100% of the width of the div. I think it's the contrast that's stopping you from seeing, I'll have to work on that but here's a brightened image of the problem:

http://i44.tinypic.com/30mu0s4.png

Firefox, and Webkit browsers display it properly. IE8 does as well. IE7 however, the b divs width is being shortened by hitting the dropping divs.

Edit:

Here's a screenshot of how it should look.

http://i42.tinypic.com/14b6mtf.png
sorry, I think I'm lost, :)

best regards

flynch01
Jan 26th, 2009, 07:21 PM
Here, I've changed the colors to be brutally different:

http://i39.tinypic.com/149qesg.png

Notice at the right of the bar, the div is hanging out (which I want it to do) but the <b> block elements in IE7 are being blocked by the hanging divs. See it now?