I'm designing a site, and of course run into a problem. I haven't touched css or xtml for 3 months or so, so i ran into this issue and got stuck. Help me out.
The code below isn't my code, but the general idea
//CSS
div{
margin:0px;
}
#container{
width:842px;
}
.logo,.slide, .leftpic, .content,.footer{
float:left; //this is so everything will wrap
}
.content{
min-height:410px;
}
.textbox{
min-height:405px;
}
//XTML
<body>
<div id="container">
<div class="logo">
<div class="slide">
<div class="leftpic">
<div class="content">
<div class="textbox">
<p>This is some text that spans more that 410px</p>
</div>
</div>
<div class="footer"></div>
</div>
</body>
so, any long text will wrap itself in the
textbox no problemo. So i add the content, and add a big left picture to match the size of the
textbox. I use web developer bar in FF to find the size of the content.
Now the problem. In firefox, the div "textbox" has a 10px margin on the top between .content and itself. This means in IE7, that the text is displayed properly, but FF isn't, and causes 2 different sizes of the content, which means making an image fit is impossible. I want to remove that margin, but i can't figure it. padding, position, margin, nothing works if i just 0 it. So far, the only way i've figured is to -10 the margin, but then in IE, this causes the same friggen problem as in FF.
Sigh, give me a hand please. It'd be muchly appreciated.
Link to page with the problem:
http://www.s-designs.ca/lotus/firs.htm
Cheers
Sammers
please email me if you have the answer.
sam@s-designs.ca. Thanks.
P.S
Not a professional, so don't rail me for improper use of floats. I know it could have been designed differently, but i'm in to deep now. If it requires an overhaul however, let me know.
