Forum Moderators: not2easy

Message Too Old, No Replies

Opera specific spacing issues

css

         

stef25

5:04 pm on Nov 21, 2004 (gmt 0)

10+ Year Member



using the box model hack i can eliminate differences between IE and FF

but now im experiencing some problems in opera, extra space being inserted between divs ...

are there any known issues?

SuzyUK

6:19 pm on Nov 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



are there any known issues?

Yes ;) Opera in Quirks Mode is an virtually an IE clone... but the BMH doesn't work for it..

but grr's aside..
What Doctype (if any) are you using, and what exactly is the space you're trying to eliminate? if you can give a small code sample there will be a way to do this..

Suzy

stef24

10:01 am on Nov 22, 2004 (gmt 0)

10+ Year Member



hi suzy,

there is some extra space below my topbar div, the banner at the top of the page. the actual content starts about 20px lower in opera only, using xhtml strict

thanks for any advise ...

stefan

(i seem to have two different logins for some reason)

<body>
<div id="content">

<div id="topbar">
<a href="index.html"><h1>header</h1></a>
<div id="international"><img src="foobar.gif" /></div>
</div>

<div id="leftimages">
<ul class="imagelist1">

<li class="imgset"><a href="#"><img src="1.jpg" class="icon"/><br />Foobar</a></li>
<li class="imgset"><a href="#"><img src="2.jpg" class="icon"/><br />Foobar</a></li>
<li class="imgset"><a href="#"><img src="3.jpg" class="icon"/><br />Foobar</a></li>

</ul>
<ul class="imagelist2">

<li class="imgset"><a href="#"><img src="4.jpg" class="icon"/><br />Foobar</a></li>
<li class="imgset"><a href="#"><img src="5.jpg" class="icon" /><br />Foobar</a></li>
<li class="imgset"><a href="#"><img src="6.jpg" class="icon"/><br />Foobar</a></li>

</ul>
</div>

<div id="rightcontent"><div id="introtxt"><p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</div>

<div id="footer">footer</div>

</div>
</body>
</html>

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
height: 100%;

}

#content {
margin-right: auto;
margin-left: auto;
padding-right: 0px;
width: 730px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 750px;
position:relative;
margin-bottom: 50px;
height: 600px;

}

html>body #content {

width: 730px; /* ie5win fudge ends */
}

#topbar{
height: 100px;
padding-top: 1px;
margin-bottom:0;

}

#leftimages {
height: 400px;
width: 300px;
float: left;
padding-top: 20px;
margin-top: 0;
padding-right:0;

}

#rightcontent {
height: 455px;
width: 345px;
float: right;
padding: 0 82px 0 0;
margin-top: 20px;
text-align: center;
}

#introtxt {
margin: 125px 0 0 50px;
width: 300px;
text-align: left;

}

#international {
position: absolute;
top: 60px;
left: 165px;

}

#thumbs {
font-size: 12px;
font-weight: bolder;
width: 400px;
padding: 75px 142px 0 188px;
text-align: left;
}

.thumbsh1 {
voice-family: "\"}\"";
voice-family:inherit;
position: absolute;
top:110px;
left: 20px;


}
html>body .thumbsh1 {
position: absolute;
top: 70px;