CSS - Css Rendering Problem In Opera (z-index Maybe?)

Hello there!
I am new here.. So Hello to all of you people.

I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera.
I see a white space under my footer..

Let me give you my code and please tell me your opinions!

Code:

* { padding:0; margin:0 0 0 0px; outline:0; } 
html, body { height:100%; }

Code:

/* center all content */ 
.center { width:950px; margin:0 auto; } 

/* keep all content except footer */ 
#wrapper, 
#wrapper-error 
{ 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -82px;
} 
#wrapper-error { margin-bottom: 0px; }
 
.footer 
{ 
width:100%; height: 82px; 
position:relative; 
background-image: url('../images/bgfooter.jpg'); 
background-repeat: repeat-x; 
-moz-box-shadow: 0px -13px 130px 20px #808080; 
-webkit-box-shadow: 0px -13px 130px 20px #808080; 
box-shadow: 0px -13px 130px 20px #808080; 
}
 
.push 
{ 
width:100%; height: 82px; 
position:relative; 
}

Thank you!

Hi,

have a weblog, powered by wordpress, styled with css.
it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content.

to view my site:
http://www.jarra.nl/

CSS:
http://www.jarra.nl/css/weblog.css

and this is a screenshot:
http://www.jarra.nl/_TEST/opera.gif

I can't find out what's causing it, and don't have an idea how to solve it,
any help is appreciated a lot..

thanx,
jarra

Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE.

The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots:

Internet Explorer


and Opera


Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug!

Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out:

my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking!

Any help would be greatly appreciated!


Sajid

Hi,

Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page.

Here's the CSS:

Code:

/* CSS Document */

body
{
	background-color:#E1FFDC;
	text-align:center;
	margin:0px;
}

#container
{
	width:675px;
	height:100%;
	background-image:url(mainbg2.gif);
	background-repeat:repeat-y;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#mainphoto
{
	width:600px;
	height:278px;
	margin-left:2px;
	background-image:url(maintop.jpg);
	position:relative;
}

#menubar
{
	width:600px;
	height:39px;
	margin-left:1px;
	position:relative;
}

mainbg2.gif is the central container background

And the page is here

Any help would be much appreciated.

Cheers

NEWSFLASH

Problem solved - i basically just took the images out of their divs.

I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in.

For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right.

I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing.

Any ideas out there? I appreciate it.

Tim Trice

hi all,

having a problem with browser compatibility here... 3 lousy pixels makes the difference between one of my divs being knocked to another row in safari, vs. a perfect lineup in IE.

have a look: http://www.offsitedbs.com

the column at the bottom entitled "security" is a big div that gets knocked to another row in safari if i try to have it line up perfectly in IE (pc)... BUT, if i knock the width back a few pixels to line it up in safari, it's not flush in IE.

code for the divs:

<div class='bottomDiv'>
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Remote Services</div>
<p class='bottomDesc'>Offsite Database Administration and Offsite Server Management.</p>
<p class='bottomText'>At Offsite DBA Services we focus ... any potential problem.</p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Onsite Services</div>
<p class='bottomDesc'>OffSite offers a free comprehensive report on the state of your database at no extra cost to your company.</p>
<p class='bottomText'>We take ... its optimal level.<br></p>
</div>
<div class="bottomDiv">
<div class='bottomTitle'><img src="IMAGES/arrow.gif">Security</div>
<p class='bottomDesc'>Offsite DBA Services uses the latest SSL technologies to manage your database through secure connections and proven technologies.</p>
<p class='bottomText'>Network technologies ... from snoops.<br></p>
</div>

and the css for the 'bottomdiv's:

.bottomDiv {
background-color: #F0F0F0;
height: 262px;
width: 193px;
float: left;
border-left: solid 1px #FFF;
border-bottom: solid 1px #FFF;
background-image:url(../IMAGES/bottomBG.gif);
background-repeat:repeat-x;
background-position:bottom;
border-top: solid 1px #FFF;
padding: 0px;
vertical-align: top;
}

any & all help is very appreciated!

thanks,

nunzio

Hi.

I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way.

Thanks very much for any help!

Does anyone know how to remove the "white space" between the bottom borders of #navinner and #navouter?

Code:

#navtop {
	color: #000000;
	font-size: small;
	font-variant: small-caps;
}
#navtop {
	margin: 0 auto;
	background-color: #828282;
	width: 136px;
	text-align: center;
}
a,a:link,a:active,a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #6699CC;
	text-decoration: underline;
}
#navinner {
	padding: 16px;
	margin: 0;
	border: 1px #C0C0C0 solid;
	height: 1%;
}
#navouter {
	padding: 0;
	margin: 0 auto;
	border: 1px #808080 solid;
	width: 134px;
}
/* Hides from IE5-mac \*/
* html #navinner {height: 1%;}
/* End hide from IE5-mac */ 
#navinner a,#navinner a:hover {
	display: block;
	width: 88px;
	margin: 16px auto;
	padding: 8px 0px;
	text-align: center;
	text-decoration: none;
}
#navinner a#active {
	background-color: #000066;
}
#navinner a {
	border: 1px #0000FF solid;
}
#navinner a:hover {
	border: 1px #C0C0C0 solid;
}

Code:

<div id="navtop">Quick Navigation</div>
<div id="navouter"><div id="navinner">
<a href="http://www.somedomain.com/" id="active"><Main Page></a>
<a href="http://www.somedomain.com/page2.php">Page 2</a>
<a href="http://www.somedomain.com/page3.php">Page 3</a>
<a href="mailto:some.email@somedomain.com">EMAIL ME</a>
</div></div>

Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this?

Here is my code:
Code:

<html>
<head>
<style type="text/css">
body {
	background: #3e1f00 url(../images/background.gif);
	background-position: top center;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
	margin-top:30px;
}

#top {
	background: red;
	position: relative;
	margin-left: auto; margin-right: auto;
	width: 758px; height: 167px;
	text-align: left;
}

#wrapper {
    position: relative;
	margin: 0 auto;
    width: 758px;
	background: pink; 	
}

#middle {
	position: relative; 
    margin: 0 auto;
	width: 758px; height: 200px;
	text-align: left;
	background: yellow;
}

#bottom {
	position: relative;
	margin-left: auto; margin-right: auto;
	width: 758px; height: 23px;
	text-align: left;
	background: green;
}

/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* hides from IE/Mac \*/
* html .clearing { 
    height: 1%;
    }

.clearing {
    display: block;
    }
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>

<body>
  <center>
  
    <div id="top">
	  TOP
    </div>
	
    <div id="wrapper" class="clearing">
	
	  <div id="middle"> 
        MIDDLE
      </div>
	  	  
    </div>
	
	<div id="bottom">
	  BOTTOM
    </div>
	
  </center>
</body>
</html>

Hello,

I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1.

Any idea?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
	margin: auto;
   padding:0px;
	width: 980px;
	border: 1px solid #000000;
}

#center {
	margin: 0px;
	padding: 0px;
   clear:both;
}

#left_panel {
	width: 240px;
	float:left;
   border:1px solid #ff0000;
}

#main_panel {
	padding: 0px;
    margin:  0px;
    margin-left:295px;
    width:660px;
    border:0px solid #ff0000;
}


#main_panel #main_panel_header {
    padding-top: 5px;
    border:1px solid #ff0000;
    overflow:hidden;
}

#main_panel_header .photo_box {
   float:left;
   background-color:#000000;
}

#main_panel_header .photo_box img {
	background-color: #000000;
	height: 115px;
	width: 140px;
   border:2px solid #000;
   border-bottom:0px;
   margin:0px;
}

#main_panel_header .photo_box a{
	color: #ffffff;
	text-decoration:none;
   font-size:10px;
   font-weight:bold;
   display:block;
   text-align:right;
   text-transform: uppercase;
   width:140px;
   float:left;
   padding:2px;
   margin:0px;
   background-color:#000000;
}

</style>
</head>

<body>
<div id="container">
    <div id="center">
        <div id="left_panel">
            Menu1<br/>Menu1<br/>
        </div>
        <div id="main_panel">
            <div id="main_panel_header">
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

This page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss.

Hi Guys...

i need help..

I have this problem. in Opera, whenever i float something within li, the bullet number disappears..

I want bullet number visible. Can anyone share some light?

here is the snipplet

Code:

<style type="text/css">
	li div{float:left;}
</style>

<ol>
	<li><div>List Item 1</div></li>
</ol>

thank you!

Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible.
The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column.

I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  <!--Don't add anything above this line, you may change the DTD to match your page-->  
<title>Test Page</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
<link href="stylesheet.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
<div id="container">  	
<div id="header">This is the header</div>  	  		  	
<div id="main">  		
<div id="mainleft">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft1">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft2">stuff on the left<br />
  			more stuff on the left </div>
<div id="mainleft3">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft4">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft5">stuff on the left<br />
  			more stuff on the left</div>
<div id="maincenter">stuff on the right<br />
  			    stuff on the right<br />
	                     stuff on the right<br />
   			    stuff on the right<br />
 			    stuff on the right<br /> 
 			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br /></div>
<div class="clear"></div>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>

CSS:
Code:

#container {
  	width: 600px;
  	text-align: center;
  	margin: 20px auto 0 auto;  }
#header {  	
        width: 598px;
  	margin: 0px 0px 0px 0px;
 	border: solid 1px;  }
#main {  	
        margin: 20px 0px 0px 0px;
  	border: solid 1px;
  	float: left;
  	width: 598px;
  	overflow: auto;  }
#mainleft {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft1 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft2 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft3 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft4 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft5 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#maincenter {  	
        float: left;
  	display: inline;
  	margin: 5px 5px 5px 5px;
  	border: solid 1px;
 	width: 424px;  }
.clear {  	clear: both;  }
#footer {  	
        margin: 20px 0px 0px 0px;
  	border: solid 1px;
  	width: 598px;  }

Some notes:
1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it?
2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids.
3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats).

Is IE 6 displaying the code right, or is Opera 9?



--> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments

Many thanks
Scott

Hi folks

I have a strange problem - in IE6 and Opera, in an iframe within a page which has left padding (or margin - it makes no difference) for the content, leaving room for a left hand menu:

the iframe is set to width: 100%. In FF, it takes this as 100% of the div it is in, as intended. But IE takes it as 100% of the screen width, and therefore puts some of the iframe off screen to the right:
http://ied.gospelcom.net/churchdesign-exampletest.php

I find it ever harder to understand because in other very similar situations I do have 100% iframes sitting happily within a div of less than full screen width.

Anyone know what is going wrong here? Or the proper way to do it?

Grateful thanks.

Tony