|
|
Posted by Agix on 05/09/07 18:30
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
Navigation:
[Reply to this message]
|