PDA

View Full Version : Argh! Opera isn't displaying CSS boxes correctly



CitznFish
May 3rd, 2007, 02:43 AM
Hello,

I am trying to get this HTML page to look the same in IE, FF, Opera, Safari, etc. What the heck am I doing wrong? It looks great in IE and FF but in Opera my left container is much much smaller than it is in IE or FF. :mad:

I'm sure I have some sort of CSS mistake, can someone please take a look at this and tell me why my code isn't working? I really hate asking for help, but I'm pulling out my hair here...

Thank you!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<style type="text/css">

#upsell_Blog_text {
font: bold 16px Georgia;
margin-bottom: 0px;
}
.blogger_image_container {
width: 250px;
float: left;
/*border: solid 1px red;*/
position: relative;

}
.blogger_text_container {
width: 325px !important; width: 370px;
float:left;
border: 12px solid #F0F8FB;
padding: 10px;
/*border: solid 1px blue;*/
position: relative;
}

.blogger_text_container2 {
width: 323px !important; width: 368px;
float:left;
border-left: solid 1px #ededed;
padding-left: 2px;
position: relative;
}
.blogger_upsell_author {
display:block;
color:#C3C2B1;
font:bold 11px Georgia, "Times New Roman", Times, serif;
margin-top: -1px;
}

.blogger_upsell_description {
font-size:12px;
margin-bottom: 0px;
line-height: .4cm;
}

.blogger_upsell_description p {
margin:0;
}

.blogger_upsell_title {
margin-bottom: 0px;
font:bold 12px Georgia, "Times New Roman", Times, serif;
color:#558599;
}


.blogger_upsell_title a {
font:bold 12px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}

.blogger_upsell_title2 {
margin-bottom: 0px;
font:bold 14px Georgia, "Times New Roman", Times, serif;
color:#558599;
}


.blogger_upsell_title2 a {
font:bold 14px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}

.blogger_upsell_title3 {
margin-left: 10px;
margin-top: 10px;
font:bold 14px Georgia, "Times New Roman", Times, serif;
color:#558599;
}


.blogger_upsell_title3 a {
font:bold 14px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}

.agg_nav_box {
width: 240px !important; width: 250px;
padding: 5px;
border-bottom: solid 1px #ededed;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
}

.agg_nav_box_last_entry {
width: 240px !important; width: 250px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

.spacer12p {
margin-top: 12px;
}


.agg_upsell_box {
border-top: 12px solid #F0F8FB;
margin-left: -10px;
margin-right: -14px !important; margin-right: -24px;
padding-right: 10px;
padding-bottom: 10px;
}
.agg_line {
border-top: solid 1px #ededed;
margin-top: 5px;
margin-bottom: 10px !important; margin-bottom: 0px;
width: 330px;
margin-left: 4px;
}

.agg_image {
margin-right: 20px;
margin-left: 10px;
margin-bottom: 20px;
}
</style>

<div id="blogger_upsell_container"><div class="blogger_image_container">
<div class="agg_nav_box">
<a href=""><div class="blogger_upsell_title">Shrimp tacos</div></a>
shrimp tacos are swell. Eat them up with your children. yum!</div>

<div class="agg_nav_box">
<a href=""><div class="blogger_upsell_title">Shrimp tacos</div></a>
shrimp tacos are swell. Eat them up with your children. yum!</div>

<div class="agg_nav_box">
<a href=""><div class="blogger_upsell_title">Shrimp tacos</div></a>
shrimp tacos are swell. Eat them up with your children. yum!</div>

<div class="agg_nav_box_last_entry">
<a href=""><div class="blogger_upsell_title">Shrimp tacos</div></a>
shrimp tacos are swell. Eat them up with your children. yum!</div>

</div><div class="blogger_text_container2"><div class="blogger_text_container">
<img src="test_image.gif" width="324" height="175" alt="" border="0"><BR><BR><a href=""><div class="blogger_upsell_title2">headline for this section</div></a>gafgdgergeggr gfgdfgh gsdf ter vadfg hdg ashg snj s hs jsg jsfjf jhdjywers <BR>gafgdgergeggr gfgdfgh gsdf ter vadfg hdg ashg snj s hs jsg jsfjf jhdjywers <BR>gafgdgergeggr gfgdfgh gsdf ter vadfg hdg ashg snj s hs jsg jsfjf jhdjywers <BR>gafgdgergeggr gfgdfgh gsdf ter vadfg hdg ashg snj s hs jsg jsfjf jhdjywers <BR>
<a href="/userprofile/lawmum">Read more</a><div class="spacer12p"></div>


<div class="agg_upsell_box">
<a href=""><div class="blogger_upsell_title3">headline for this section</div></a>
<div class="agg_line"></div>
<img src="test_image2.gif" width="58" height="59" alt="" border="0" class="agg_image" align="left">gafgdgergeggr gfgdfgh gsdf ter vadfg ashg snj s hs jsg jsfjf jhdjywers gafgdgergeggr gfgdfgh gsdf <br>
<a href="">read more</a>



</div>
<div class="agg_upsell_box">
<a href=""><div class="blogger_upsell_title3">headline for this section</div></a>
<div class="agg_line"></div>
<img src="test_image2.gif" width="58" height="59" alt="" border="0" class="agg_image" align="left">gafgdgergeggr gfgdfgh gsdf ter vadfg ashg snj s hs jsg jsfjf jhdjywers gafgdgergeggr gfgdfgh gsdf <br>
<a href="">read more</a>



</div>
<div class="agg_upsell_box">
<a href=""><div class="blogger_upsell_title3">headline for this section</div></a>
<div class="agg_line"></div>
<img src="test_image2.gif" width="58" height="59" alt="" border="0" class="agg_image" align="left">gafgdgergeggr gfgdfgh gsdf ter vadfg ashg snj s hs jsg jsfjf jhdjywers gafgdgergeggr gfgdfgh gsdf <br>
<a href="">read more</a>



</div>


</div></div></div>


</body>
</html>

CitznFish
May 3rd, 2007, 02:50 AM
here are screen shots, maybe this will be helpful?


FF and IE
http://www.arcade-at-home.com/ot/css_ff_ie.jpg


Opera
http://www.arcade-at-home.com/ot/css_opera.jpg

_Aerospace_Eng_
May 3rd, 2007, 08:33 AM
Nope. Since your problem requires that we see the actual page the screen shot didn't help much. Post a link. Don't say "I don't have this site live yet". If you don't then make it live some how. Help us help you.

CitznFish
May 3rd, 2007, 05:58 PM
Nope. Since your problem requires that we see the actual page the screen shot didn't help much. Post a link. Don't say "I don't have this site live yet". If you don't then make it live some how. Help us help you.

I did post the complete HTML/CSS in my original post. :o

Here is the same code on the web, I uploaded it this morning:


http://www.arcade-at-home.com/html_help/aggregate_page.html

CitznFish
May 3rd, 2007, 06:49 PM
Well, I updated my Opera browser from 8.2 to the most recent and I guess it was an issue with Opera because it now displays properly. Thankfully Opera users are more likely to keep up to date with the latest browser then, say, IE users.

I'm sure my CSS still isn't perfect, but it works.:o