Problems with margins, paddings, divs and floats! PLEASE HELP!

A

Agix

HI there,

I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.

Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per sé, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.

I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/

Now this is just a test page I was making and playing around with CSS.

This is a copy of my CSS:

*******************************************************************************************

body
{
background-color:#000000;
margin:5px;
padding:0px;
}

#mainpageset
{
width:560px;
background-image:url(abackground.gif);
padding:0px;
margin:0px
height:595px;
}

#navbarmain
{
margin:0px;
padding:0px;
width:375px;
height:30px;
}

..buttonbarmain
{
width:75px;
height:30px;
float:right;
background-image:url(button.rest1.gif);
background-repeat:no-repeat;
text-align:center;
padding:0px;
margin:0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
}

..buttonbarmain:hover
{
background-image:url(button.active1.gif);
}

..linktextbarmain
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
}

#adbarright
{
float:right;
text-align:center;
color:#000066;
border: solid #00CC66 1px;
width:160px;
padding:0px;
margin:0px;
height:590px;
}

#mainpagecont
{
border:solid 1px #00CC66;
width:400px;
height:560px;
padding:0px;
margin:0px;
overflow:hidden;
}

..adbarimage
{
width:160px;
height:auto;
margin:0px;
padding:0px;
}

**************************** END CSS
**************************************

If you take a look at particularly "#mainpageset" this is a div tag
container for the entire page contents. It has it's width set to
560px.

Notice how I have set EVERY id and class to have margin AND padding =
0px. This is so I can work out how the browser is behaving.

Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
160px respectively in width.

If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
about is that the two divs, no margins or paddings but they still
overlap!!!!

Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
does the browser not follow mathematics?

HELP!

HTML Included to be helpful....

*********************************************************************************************

<body>
<div id="mainpageset">
<div id="adbarright">
ADS!
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
</div>
<div id="navbarmain">
<div class="buttonbarmain"><a href="#NULL"><font
color="#FFFFFF">Links</font></a></div>
<div class="buttonbarmain"><a href="#NULL"><font
color="#FFFFFF">Discuss</font></a></div>
<div class="buttonbarmain"><a href="#NULL"><font
color="#FFFFFF">Reviews</font></a></div>
<div class="buttonbarmain"><a href="#NULL"><font color="#FFFFFF">News</
font></a></div>
<div class="buttonbarmain"><a href="#NULL"><font color="#FFFFFF">Home</
font></a></div>
</div>
<div id="mainpagecont">Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
</body>
</html>

************************* END HTML
**********************************************************

Please remember, i was an explanation for this effect as well as a
solution. I know I can fix it easily, but I want to KNOW WHY this is
happening.

Many thanks if you're the one who can come up with the goods.

Gregory
 
B

Ben C

HI there,

I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.

Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per sé, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.

I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/ [...]
If you take a look at particularly "#mainpageset" this is a div tag
container for the entire page contents. It has it's width set to
560px.

Notice how I have set EVERY id and class to have margin AND padding =
0px. This is so I can work out how the browser is behaving.

Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
160px respectively in width.

If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit.
Click to expand...

What's wrong with it?
In IE6+7 it looks plain awful. What I am really annoyed about is that
the two divs, no margins or paddings but they still overlap!!!!
Click to expand...
Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
does the browser not follow mathematics?
Click to expand...

Firefox is following mathematics OK here.

400px + 160px + 2px + 2px = 564px.

Each 2px is for the left and right borders of mainpagecont and
adbarright.
 
D

dorayme

Agix said:
HI there,

I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.

Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per sé, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.

I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/
....

Notice how I have set EVERY id and class to have margin AND padding =
0px. This is so I can work out how the browser is behaving.
Click to expand...

If you want to set all margins to 0 for testing purposes you can
just put * {margin: 0;} at top of your css. Ditto padding.

If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
about is that the two divs, no margins or paddings but they still
overlap!!!!
Click to expand...

As for how floats behave in different browsers, IE6 is known to
add pixels and you will need to study how this browser and othe
IE browsers leave the standards: Not bad to start with may be:

<http://www.positioniseverything.net/explorer.html>

One thing you should do is recheck your code. You leave out a
semicolon where you should not (it is usually important not to do
this):


#mainpageset
{
...
margin:0px
height:595px;
}


And don't use font tags, use the css sheet to control fonts.

And, while I am at it, forget the doc type you are using, use
4.01 Strict, you gain nothing at all from it.
 
A

Agix

HI there,
Click to expand...
I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.
Click to expand...
Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per s?, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.
Click to expand...
I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/ [...]
If you take a look at particularly "#mainpageset" this is a div tag
container for the entire page contents. It has it's width set to
560px.
Click to expand...
Notice how I have set EVERY id and class to have margin AND padding =
0px. This is so I can work out how the browser is behaving.
Click to expand...
Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
160px respectively in width.
Click to expand...
If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit.
Click to expand...

What's wrong with it?
In IE6+7 it looks plain awful. What I am really annoyed about is that
the two divs, no margins or paddings but they still overlap!!!!
Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
does the browser not follow mathematics?
Click to expand...

Firefox is following mathematics OK here.

400px + 160px + 2px + 2px = 564px.

Each 2px is for the left and right borders of mainpagecont and
adbarright.
Click to expand...

Thank you thank you thank you thank you.

I was just being ignorant about the browsers including the borders in
their calculations. Explains the dodgy look in IE as well.

I will bear that in mind for future designs.

Although do the browsers include a border calculation if there is not
one? or do they just sit flush together?

many thanks again

Gregory
 
B

Ben C

Firefox is following mathematics OK here.

400px + 160px + 2px + 2px = 564px.

Each 2px is for the left and right borders of mainpagecont and
adbarright.
Click to expand...
[...]
Although do the browsers include a border calculation if there is not
one? or do they just sit flush together?
Click to expand...

If you're doing a series of left floats for example, with borders, they
will line up flush next to one another. Or should, but I keep hearing
about strange 3px gaps in IE.

Same goes for a series of inline-blocks, inlines or table cells
generally. So yes, you won't generally get that overlapping unless you
start setting widths on everything.
 
D

dorayme

Ben C said:
If you're doing a series of left floats for example, with borders, they
will line up flush next to one another. Or should, but I keep hearing
about strange 3px gaps in IE
Click to expand...

In IE if you float a box left to some static text content, IE6
will add 3px to - let me be nice to Microsoft for a moment - give
some grace to the text, it always looks so ugly if the author
forgets to provide some (and it is easy to muck up this little
bit where floats are concerned if the author does not quite know
what he/she is doing)
 
D

dorayme

Bergamot said:
Grace has nothing to do with it. It's a bug.
http://www.positioniseverything.net/explorer/threepxtest.html
Click to expand...

I do not know your grounds for being so sure of this. It is
hardly a demo to point to the annoying consequences of a non
standard rendering browser. If the MS engineers deliberately put
in such a gap (eg, with floated pictures in mind, without
thinking through all the consequences for the html/css authoring
community) it may have had some motivation in providing a bit of
"god-given padding', grace. To show that grace had nothing to do
with it, you might need to provide more than the endless gnashing
of teeth and "workaround" website pages.

My remark was partly based on the principle of charity and partly
on a half forgotten memory of some MS engineer talking in some
forum about this issue.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I add arrows to my FAQ 0
Help needed with code 5
Help with Visual Lightbox: Scripts 2
Having difficulty with the layout of these images / video for this web page 2
Please Help? 0
Justify-content not working 1
SendGrid email issue in responsive Gmail 1
Help with my responsive home page 2

Members online

Total: 32 (members: 1, guests: 31)
Robots: 632

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top