Forum Moderators: open
I want my webpage to just "line up", by using CSS positioning.
Unfortunately, I can not seem to do this, and here is why:
Problem code is my wanting to line up 2 divs with BORDERS!
div.leftbar{
position:absolute;
top:25%;
left:0;
height:80%;
width:15%;
border-width:0px;
margin: 0 0 0 0;
background-color:#131447;
border-left: 0px solid white;
border-right: 8px solid white;
}
div.maintext{
position:absolute;
top:25%;
left:15%;
width:70%;
height:80%;
background-color:#000000;
border-width:0px;
margin: 0 0 0 0;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
z-index:5;
}
These divs are just next to each other in the body (notice the positioning). Nothing embedded or fancy...
So! Here is my issue. I have the border set to 8 (which I have incremented from 1) on the leftbar div, so I can clearly see the rendering difference between Mozilla-class browsers and I.E.
And here it is: Mozilla seems to *add* the border onto the already set width of 15%, thereby making the leftbar div *LARGER* than 15%, which is *wrong*, right? IE6 will cut into the content size, and make the padding go "inwards" of the div.
So, whats the workaround? Is there something I am doing wrong? My doctype is html4.01 strict... Thank you so much for any insight ( I have read through most of this forum: Nick_W? where are you? :) )
Thx!
The divs should probably be set with ID's (which are unique identifiers) and not with classes (which can be used many times in a doc). I doubt that this will make the browser's calculations any different, but you could give it a try.
[edited by: tedster at 2:44 pm (utc) on Sep. 24, 2002]
Of course, the way any particular browser actually renders doesn't necessarily line up with the W3C.
! So! If you increase the border width, then you *DO* increase the width of the div! SO, as always, Mozilla is the browser showing this correctly, and IE isn't. Sigh. So, does no one have a workaround?
thx for replies guys!
So! If you increase the border width, then you *DO* increase the width of the div!
Exactly. Basic addition-
margin+border+padding+content+padding+border+margin
-based on the parent element
I have the border set to 8 (which I have incremented from 1) on the leftbar div, so I can clearly see the rendering difference between Mozilla-class browsers and I.E.
-Not sure what you mean. Could you be a bit more descriptive about what you're trying to accomplish? Is the IE Gap unwanted?
[edited by: madcat at 6:20 pm (utc) on Sep. 24, 2002]
Ok given that the border should increase the div size, why is it that IE does not increase my div size? When I make a border of any size, IE keeps the DIV size the *same*, and makes the *content* size of the div smaller. So... mozilla and IE basically render completetly opposite from another.
FOr a 1px border, this is a minor issue, but for larger borders, its Very very obvious in certain instances.
The things I said about 8px and 1px dont really matter; ) i was just trying to illuminate what I was doing to see the rendering differences between browers.
THank you!
[tantek.com...]
At the bottom, it notes IE6 kicks into quirk mode only when using:
<?xml version="1.0"?>
In the simplest of terms, the IE box-model problem can be avoided by not assigning problematic properties and values to sized containers. Instead... apply padding and/or margins to the "liquid elements" contained within the "sized" elements.
*add borders to padding and/or margins
[webmasterworld.com...]
Read post #2 by Papabaer- this explains a great deal.
--Thanks for pointing this out again, it's a timely re-surfacing.
Well, i have yet to try these techniques: but I am quite sad that IE makes it this way.
As a side note, and I dont seriously expect anything good about this:
Is there anyway to make IE properly render .png with a transparent background short of that huge directx related call thing?
You have been a huge help madcats,
again, thank you
!
ahh so i should have been able to find the answer to this: sorry!
It's ok- that's how we all learn!
Well, i have yet to try these techniques: but I am quite sad that IE makes it this way.
No big deal- you can work it out, but try and design with these limitations in mind...this creates interesting sites too.
Is there anyway to make IE properly render .png with a transparent background short of that huge directx related call thing?
[msdn.microsoft.com...]
-->The code under syntax works, but it removes your image altogether in Opera- not very cool. Gif format destroys your image huh?
Ok I am a "gimp-only" user, mainly because of money reasons, but also because I have learned how to use it to some extent, now. And I really like it :)
Anyway, Yes, Gif is often something I can't stand, because I can rarely get it to do what I want. I can not have complex alpha-shaded-to-transparent areas on my gifs. And, of course, there is that 256 color restriction.
I have done ALOT of searching on this subject, but is there such thing as a more-than-256 color gif? If anyone here is experienced in Gimp: can it do anything with gifs that other major graphic programs can?
And Opera can't read it?! Oh thats sad... another workaround issue... but i can figure that one out, I believe.
The W3C has a PNG Transparency test page [w3.org] which may be a help working things out.
I have tried to make a 1 pixel high DIV in IE, but... its way too big. It seems to be the size of one text line, perhaps.
div.horizontalbarwhite{
position:absolute;
left:0;
top:25%;
height:1px;
width:100%;
border-width:0px;
margin: 0 0 0 0;
background-color:white;
z-index:9;
}
What you see there renders as approx. 10 pixel high bar in IE. Any ideas/suggestions?
Here let me show u my code:
div.leftbar{
overflow:scroll;
position:absolute;
top:25%;
left:0;
height:80%;
width:15%;
margin: 0 0 0 0;
background-color:#131447;
}
div.leftbarnest{
position:relative;
width:100%;
height:100%;
border-width:8px;
border-right: 8px solid white;
border-left: 8px solid white;
}
and the actual html
<div class = "leftbar" id = "leftbar">
<div class = "leftbarnest" id = "leftbarnest">
</div>
</div>
Ok. now: heres what I "want": I want there to be a 15% wide div, with a 8px white border on the INSIDE of its dimensions: so I tried the nested div thing. In IE, you get exactly what you would think you would. (2, 8px bars on the inside of the 15% wide div).
In Mozilla, Since they borders add to the size of the inner div (which is set to 100% of the outer div, the content *overflows* the outer div. I added the overflow:scroll to illustrate the difference between IE and MOzilla. In IE, the scroll bars never show up, because the content does not overflow: But in Mozilla, the bars do show up. How do I constrain the inner div to the size of the outer div? I think I am just missing a CSS property...
NOte: in the example from the link you gave, they did not set "width" and "height" to 100%, they didn't specify anything, in fact. But, when I did that, there were no borders, because the inner div was basically non-existant, since it had nothing in it.
Ahh and so the dilemma of mine goes on :)
Thx!
