Opera Browser CSS Issues

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!

I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it.

here is the link:
http://mizuedesign.com/0000.html

in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.)

However in FF, Safari, and Opera the same DIV does not extend.

I am trying to achive the results I see in IE7.

Any help would be greatly appriciated.

S. Boztepe

Hey everyone,

The site in question is roadmasterusa.com

We've got a site developed that looks acceptable in most browsers, with the exception of Opera and IE8 (though we were able to put in the modify header to roll back to IE7 rendering).

The problem is the positioning of the navigation, and some of the other page elements. Now I have been unsuccessful in finding any way about this other than to not support Opera, but we don't want to miss out on that 1% of visitors.

I've spent quite some time trying to figure out how to get this site to render right; now I need some expert help.

I look forward to anything you suggest.

-Troy Oltmanns

If you go here

company.com layout

It looks correct in IE or Firefox

But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up.

Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration.

body
{
background: #e3edc2; color: #333;
font: .8em, arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

I'm using background images on a <span> tag.

Code:

.thespan {
  display: -moz-inline-box;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: 2px;
  /* using longhand on purpose, since other classes override bits later */
  background-image: url(../img/iw_ds_sprite.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

Code:

.theshell .thespan {
  background-position: 0px -40px;
}

This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

Any help is greatly appreciated.

Tim

devwebsites.com/sitedevs/

Anyway, FF3 and Safari show up fine. I used conditional comments to get rid of what Opera is showing, and to make it look like FF3. However since Opera is displaying this behavior I guess I need to figure out what the actual problem is. Any input on it?

the url is:
http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html

In IE8 beta it works perfectly.

In firefox the entire bottom section (the part under the slide show) is messed up.

In Opera there's a gap under the play controls.
If I close the gap, it messes up IE.

Getting this slide show to work was quite the task, but I'm close to having it work on the big three!

Should I just un-nest everything?

I used to be better at this, but never used to care how things looked in other browsers. Now I'm so confused about what I'm doing wrong that I've second-guessing every action I take, and can't make sense of something...

I've got a very simple header-content-footer (footer is essentially header tacked onto bottom) that works more or less how I'd like, but when viewing in Opera 9.5 the Georgia font I'm asking looks utterly crap.

Please have a look at Firefox 3 or IE 6+ for how I want it to look. It's essentially the standard <h1> font setting for most Wordpress templates.

What am I doing wrong???

site -- littlebee.gq.nu

Thank you sincerely for your help. I'm regressing to extreme beginner here -- can't seem to get it to work even when creating a document focusing only on the body and text attributes...

Does anyone know how to get this code to display correctly in Opera? HTML4STRICT Code:
Original - HTML4STRICT Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> p { } .mouse { display: inline-block; padding: 6px; margin: -6px; } .mouse:hover { background: #888; border: 2px solid black; padding: 4px; } </style> </head> <body> <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p> </body> </html>

  

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


 "http://www.w3.org/TR/html4/loose.dtd">


 <html>


 <head>


 <meta http-equiv="X-UA-Compatible" content="IE=8">


 <style type="text/css">


 p {


 }


 .mouse {


  display: inline-block;


  padding: 6px;


  margin: -6px;


 }


 .mouse:hover {


  background: #888;


  border: 2px solid black;


  padding: 4px;


 }


 </style>


 </head>


 <body>


 <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p>


 </body>


 </html> 

I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins.

You can check this problem in the pink square with curvy corners that I have in
the url metatradersoftware com(I cannot mention it because of forum fules).

How I am supposed to show you my code if you do not know the url where it is?This post is just for asking a question. Thus, I hope there is nothing wrong with it.
If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft.
I would appreciate any suggestion.
Thanks in advance

Just curious if anyone has any resources that explain what type of overflow attributes Opera supports.

I'm working on a site right now and see that in Opera "overflow: auto" is not supported. Is there a known work around?

I am using Opera 9.25

Thanks!

Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern.

The stylesheet is as follows
Code:

html, body, h1, h2, h3, h4, ul, li {
	margin: 0;
	padding: 0;
}
h1 img {
	display: block;
}
img {
	border: 0px none;
}
a {
	color: #464544;
}
a:hover {
	color: #FFA405;
}
.left {
	float: left;
}
.right {
	float: right;
}

.clear {
	clear: both;
}


body {
	background: #ECF4F7;
	text-align: center;
	font: 11px verdana, arial, sans-serif;
	color: #695F4C;
	padding-bottom: 10px;
}

/** layout **/
#wrapper {
	text-align: left;
	margin: 37px auto;
	width: 839px;
	background: #ffffff;
	position: relative;
	padding: 0;
}

#header {
  background: #D9D1BC url('images/logo.jpg') no-repeat;
  height: 192px
}


#nav {
  background: #4B5360;
  position: absolute;
  top: 153px;
  left: 339px;
  width: 499px;
  height: 20px;
  padding: 9px 0px;
  text-align: center;
  margin: 0;
}

#nav li {
  list-style: none;
  display: inline;
  color: #fff;
}
#nav a {
  text-decoration: none;
  color: #fff;
}


#body {
  background-color:#FFF;
}

#postheadb {
  font: 10px verdana, arial, sans-serif;
  font-weight: bold;
  color: #FFFAF0;
  float: right;
  width: 500px;
  background: #2dbaa7;
}
#postheadb .inner {
  padding: 6px 12px;
  width/**/:/**/ 501px;
  Height/**/:/**/ 10px;
}
#postheadab p {
  margin: 0.9em 0;
}

#posthead {
  font: 10px verdana, arial, sans-serif;
  font-weight: bold;
  color: #FFFAF0;
  float: right;
  width: 839px;
  background: #2dbaa7;
}
#posthead .inner {
  padding: 6px 12px;
}
#posthead p {
  margin: 0.9em 0;
}

#contentb{
  font: 12px verdana, arial, sans-serif;
  color: #cad10e;
  float: right;
  background: #40789d;
  
}
  
#contentb .inner {
  padding: 6px 12px;
  width/**/:/**/ 476px;
  Height/**/:/**/ 52px;
}

#contentb p {
  margin: 0.9em 0;
}

#content{
  font: 12px verdana, arial, sans-serif;
  color: #cad10e;
  float: right;
  width: 839px;
  background: #40789d;
}
  
#content .inner {
  padding: 12px 12px;
}

#content p {
  margin: 0.9em 0;
}

#copyright {
  text-align: center;
  background: #030303;
  font-size: 9px;
  padding: 2px;
  width/**/:/**/ 92.8em;
  Height/**/:/**/ 3em;
}


 input
{
  color: #FFFAF0;
  background: #40789d;
  vertical-align: middle;
}

.email input
{
position:absolute;
left: 40px;
top: 20px;
color: #781351;
width: 225px;
background: #fee3ad;

}

#sidebar
{
margin-bottom:0;
float: left;
background: #D3D3D3;
padding: 395px 169px;
Height/**/:/**/ 70px;
}

.videobar {
position:absolute;
left: 20px;
top: 200px;
height: 600px;
width: 300px;
float: right;
padding: 10px;
}

.password input
{
position:absolute;
left: 40px;
top: 60px;
color: #781351;
width: 225px;
background: #fee3ad;

}

#login{
 font: 10px verdana, arial, sans-serif;
  font-weight: bold;
  color: #FFFAF0;
  float: right;
  width: 839px;
  background: #2dbaa7;
}

#searchTerm{
width: 125px;
height: 15px;
}

#submitsearch{
height: 22px;
}

#login .inner {
  padding: 90px 12px;
}
#login p {
  margin: 0.9em 0;
}

.submit input{
position:absolute;
left: 40px;
top: 90px;
width: 55px;
height: 22px;
padding: 0;
}

fieldset {

border: 1px solid #781351;
position: absolute;
left: 300px;
height: 130px;
top: 215px;
width: 300px;
}

legend {
background-color: #ffa20c;
border: 1px solid #781351;
line-height: 1.5em;
position: relative;
top: -0.75em;
} 

The website displayed in Firefox can be seen here
Firefox

and Opera here
Opera

many thanks,
Doug

Hi guys,

I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout.

I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following:

Code:

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
	background-color: #000000;
	}

Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know!

I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed.

Thanks everyone!

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>

I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more.
In Opera9.0 it looks very messy.

IE: http://browsershots.org/screenshots...1b07da5ea24003/

Opera: http://browsershots.org/screenshots...e171bac56fbf14/

Original:
http://www.zahra-zahra.com/aboutus.php

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated.

Demo link at www.ryancolantuono.com/test



Code:

 
body {
	font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
	margin: 0;
	padding: 0;
	
}

#content {
	color: #555;
	margin: auto;
	width: 780px;
	
}


/* ----------------------- HEADER ----------------------- */
#top-header {
	background-color: #000;
	height: 20px;
	color: #eee;
	border-bottom: #555 solid 1px;
	
}

#top-header .login {
	float: right;
	margin: 5px 10px 0 0;
	font-size: .7em;
}

#top-header .login a{
	text-decoration: none;
	color: #70d5d4;
}

#mid-header {
	background: #222 url("../images/mid-header.png");
	height: 55px;
	
}

#bot-header {
	background: #4eaead url("../images/bot-header.png") repeat-x;
	height: 105px;
	
}

/* ----------------------- END HEADER ----------------------- */


/* ----------------------- NAVIGATION ----------------------- */

#nav {
	float: left;
	margin: 0 15px 0 0;
}

#nav ul {
	margin: 0;
	padding: 0 70px 0 0;
	display: block;
	list-style: none;
}

#nav ul li {
	top: 32px;
	display: inline;
	position: relative;
	clear: both;
	
}

#nav ul li a {
	font-size: .8em;
	color: #fff;
	text-decoration: none;
	padding: 3px 12px 3px 12px;
}

#nav ul li a:hover {
	background-color: 70d5d4;
	color: #000;
	-moz-border-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	padding: 5px 12px 5px 12px;
}

/* ----------------------- END NAVIGATION ----------------------- */

Code:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>

</head>
<body>

<div id="top-header">
  <div class="login">Have an account? Login <a href="#">here</a>.</div>
</div>
<div id="mid-header">
  <div id="nav">
	<ul>
	  <li><a href="#">Home</a>
	  <li><a href="#">About Us</a>
	  <li><a href="#">Portfolio</a>
	  <li><a href="#">Links</a>
	  <li><a href="#">Contact</a>
	</ul>
	  
  </div>

</div>
<div id="bot-header"></div>



</body>
</html> 

Hello. This is probably not good practice but I have two problems arising with the same piece of code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <style type="text/css">
       body {
         font-family: verdana, arial, helvetica, sans-serif;
         font-size: 0.8em;
         background: #cfcf00;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         padding-bottom: 2em;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #303030; } /* end body */
      #logo_search {
        width: 100%;
        min-width: 957px; 
        max-height: 79px;
        padding: 32px 0 0 0; 
        border: 0;
        margin: auto;
        overflow: hide; 
        background: #ffffff; } /* end #logo_search */
      #logo_container { 
        width: 40%;
        float: left;
        background: #ffffff; 
        text-align: right;
        border: 0;
        border-bottom: 1px solid #ffffff;
        height: 51px;
        padding: 0;
        margin: auto; } /* end #logo_container */
      #base { 
        clear: both;
        padding-top: 1px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 100%; 
        background: #c0c0c0;  } /* end #base */
      #main_block { 
        background: #ff0000;
        margin: auto;
        text-align: left;
        width: 955px; } /* end #main_block */
      #main_content { 
        background: #ffffff;
        border-left: 1px solid #ff0000;
        padding-top: 1em;
        padding-bottom: 1em;
        border-right: 1px solid #ff0000; } /* end #main_content */
      #top_main_content ul {
        float: left;
        list-style-type: none;
        border-spacing: 0;
        padding: 0;
        text-align: right;
        border-top: 1px solid #00ff00;
        height: 243px;
        width: 266px; } /* end #top_main_content #links_table */
      #top_main_content ul li {
        vertical-align: middle;
        color: #0000ff;
        border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
      #top_main_content ul li a { 
        line-height: 26px;
        padding-right: 1em;
        display: block;
        color: #0000ff;
        width: 259px; } /* end #top_main_content ul li a */
      #top_main_content ul li a:hover {
        background: #cfcf00; 
        color: #000000; } /* end #top_main_content ul li a:hover */
      #top_main_content img { 
        border-bottom: 1px solid #00ff00;
        border-top: 1px solid #00ff00;
        margin-top: 12px;
        text-align: right;
        vertical-align: top; } /* end #top_main_content img */
    </style>
  </head>
  <body>
    <div id="logo_search">
      <div id="logo_container">
        &nbsp;
      </div>
    </div>
    <div id="base">
      <div id="main_block">
        <div id="main_content">
          <div id="top_main_content">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
              <li><a href="#">Link 8</a></li>
              <li><a href="#">Link 9</a></li>
            </ul>
            <img src="#" alt="" id="main_graphic" height="243" width="687"/>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else.

Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go.

Edited to add:
Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this?

Hey everyone,

Just curious here, does IE and Opera have something that rounds corners like Firefox using CSS only? I figure IE would because it has some other stuff, but I am not sure sure about Opera. Any thoughts/links on this? Or will I have to fall back to Javascript?

Hi guys,

Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains.

Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor.

Any insight would be much appreciated (yes the coding's messy... it's a work in progress )

Thanks!

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 folks

Hoping a CSS expert out there might be able to assist.

I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768.

The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator.

In Opera, it is fine at 800x600, but does not render properly at 1024x768

Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari.

I am guessing it is something to do with #text ? Do I need to clear: or something like that?

If you can help, I would be grateful.

Thanks in advance
Sol

www. waihekemagicmassage.com
And: /magic.css

hey all,

I'm trying to display a <b> as a block and have its height be 100%, unfortunately in opera and safari it doesn't display anything. If i set the height to be 100px it displays it, but it doesn't like percentages. Anyone know why? and how to fix it?
thanks,

- legit

Hey everyone,

I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code:
css Code:
Original - css Code body { background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png ); color: #000000; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: center; padding: 0; margin: 0; } a img { border: 0; } a,a:link,a:visited,a:hover,a:active { color: #0099FF; text-decoration: underline; } a:hover { color: #FF9900; text-decoration: underline; } #container { width: 85%; margin: 0 auto; text-align: left; } #header { padding-left: 150px; } #menu { width: 100%; text-align: center; } #menu ul { list-style-type: none; display: block; } #menu li { display: inline; } #menu a { padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 15px; } #menu a:hover { opacity: .8 !important; background-color: #999999; color: #FFFFFF; } #main { opacity: .6 !important; filter: alpha(opacity=50); background-color: #FFFFFF; padding: 1%; text-align: justify; } #main h1 { color: #0075FF; border-bottom: 2px solid #0099FF; display: block; width: 60%; } #footer { text-align: center; } #footer a { color: #000000; }

  

 body {


     background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png );


     color: #000000;


     font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;


     font-size: 12px;


     text-align: center;


     padding: 0;


     margin: 0;


 }


 a img {


     border: 0;


 }


 a,a:link,a:visited,a:hover,a:active {


     color: #0099FF;


     text-decoration: underline;


 }


 a:hover {


     color: #FF9900;


     text-decoration: underline;


     


 }


 #container {


     width: 85%;


     margin: 0 auto;


     text-align: left;


 }


 #header {


     padding-left: 150px;


 }


 #menu {


     width: 100%;


     text-align: center;


 }


 #menu ul {


     list-style-type: none;


     display: block;


 }


 #menu li {


     display: inline;


 }


 #menu a {


     padding-left: 45px;


     padding-right: 45px;


     padding-top: 15px;


     padding-bottom: 15px;


 }


 #menu a:hover {


     opacity: .8 !important;


     background-color: #999999;


     color: #FFFFFF;


 }


     


 #main {


     opacity: .6 !important;


     filter: alpha(opacity=50);


     background-color: #FFFFFF;


     padding: 1%;


     text-align: justify;


 }


 #main h1 {


     color: #0075FF;


     border-bottom: 2px solid #0099FF;


     display: block;


     width: 60%;


 }


 #footer {


     text-align: center;


 }


 #footer a {


     color: #000000;


 } 

And also IE6+ do not seem to render the filter property. Anyone know whats going on with this?

Hello Everybody,

I had this site working in opera and IE and it works beautifully. When it comes to firefox, the box form extends for a hundred pixels and I don't know why. The sheet is set at a specific width and i can't change anything with the form in css. can anyone please help me with this, thank you.

here is the site
Firefox not working for form

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

looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking?

Code:

.topa	{ width: 1000px; padding: 5px; background:#000000 }

edit:
nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way.

Hey,
I got a webpage that looks like it should in both IE 6.0 and firefox 2.0.
Now i went testing it in opera and it has a problem with some div positions.

Here is how it looks in firefox and IE:
Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg
firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg

And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg

The buttons signout, new contact and contact list are shifted to the low.

I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it.
Code:

<body>
<div class="containingTitles">

<div class="titleNavDiv">
    <b>Hello, stefan.</b>
</div>
 
<div class="titleContentDiv">
    <form action="search_contact.php" name="search" id="search" method="get">
        <div style="float: left; width: 35%; margin: 0%; padding: 0%;">
            <input type="text" style="width: 50%" name="sq" value="" id="sq">&nbsp;
            <input type="submit" name="s" value="Search" id="s">
        </div>
    </form>
    <form name="new_contact" id="new_contact" method="get" action="new_contact.php">
        <div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
            <input type="submit" name="nc" value="New Contact" id="nc">&nbsp;
        </div>
    </form>
    <form name="contact_list" id="contact_list" method="get" action="contact_list.php">
        <div style="float: left; width: 22%; margin: 0%; padding: 0%;">&nbsp;
            <input type="submit" name="cl" value="Contact List" id="cl">
        </div>
    </form>
    <form name="logout" id="logout" method="get" action="logout.php">
        <div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
            <input type="submit" name="lo" id="lo" value="Sign out">&nbsp;&nbsp;
        </div>
    </form>
</div>
</div> 

<div class="navigationDiv">
    <div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
    <div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
    <div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
    etc.
</div>

<div class="contentDiv">
----- contents of the page -----
</div>

</div>

And belowis the css code i use to float the divs into position.
And here you can see the division of the pages and which class belongs to which div:
http://img353.imageshack.us/img353/1503/layoutai3.jpg
css Code:
Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }

  

  


 body{


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     background: url(background.jpg) 22% 0;


 }


 .containingTitles{


     float: left;


     width: 100%;


     margin: 0%;


     padding: 0%;


     background-color: #4D3D4D;


     color: white;


     overflow: hidden;


 }


 .titleNavDiv{


     float: left;


     width: 20%;


     margin: 0%;


     padding-left: 2%;


     padding-right: 0%;


     padding-top: 1%;


     padding-bottom: 1%;


     overflow: hidden;


 }


 .titleContentDiv{


     float: left;


     width: 77%;


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 1%;


     padding-bottom: 1%;


     overflow: hidden;


 }


 .navigationDiv{


     float: left;


     width: 22%;


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     overflow: hidden;


     color: #FFFFFF;


     background-color: #4D3D4D;


 }


 .contentDiv{


     float: left;


     width: 76%;


     margin: 0;


     padding-left: 2%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     overflow: hidden;


     color: #000000;


     background-color: #BFACBF;


 } 

hope you can tell me why this happens.

Thanks in advance.

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>

Hi all,

I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE.

First: in both the header image is gone
Second: in IE the menu images are shown too wide resulting in a messed up menu
Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced.

I'm still trying to debug it myself but I don't seem to be able to solve them.

my blog

Any help or ideas are appreciated. Kind regards,

Jef

Hey everyone,

I have been working on a sudoku php / html game using sessions but I have run into an issue. Here is the link to my page http://waynemarsh.byethost9.com/sudoku.php , my problem is that in Opera and IE the page doesn't look like i would think the code says it would.

in firefox, safari, epiphany, konqueror, firefox 1.0-2.0, mozilla 1.7/netscape 7, it looks great

in netscape 6 it shows 3 9x3 grids on top of each other about 2 pixels offset

in IE 5/5.5/6/7 & opera 7 it looks like a crossword

in opera 8/9 it looks like 9 3x3 grids in one column

of course netscape <= 4.8, ie <= 4, it just doesn't show, who uses them anyway?

in lynx well, it's lynx, all the text inputs show up below each other so there are 81 vertical inputs

from what I see in the code, it should show fine. anyone have any ideas? what could it be? i'm mostly worried about the opera browsers

the issue seems like it's somewhere with .sudoku_grid

Say I have the code:

Code:

<div style="float: left">left</div>
<div style="float: right">right</div>

In Opera, Firefox and IE, "left" will be on the left side of the scren, "right" will be on the far right. Now let's say I nest those two in a parent. I want the parent to expand with the child's content, so I float it too:

Code:

<div style="float: left;">
	<div style="float: left">left</div>
	<div style="float: right">right</div>
</div>

In Firefox in IE, "left" is still on the far left and "right" on the far right. In Opera, it collapses the div so they're right next to each other, or "leftright".

Now I could set a width of 100% on the parent, but the situation I'm actually using something like this in is more complicated -- padding, margins, etc. So setting a width of 100% makes the parent overflow it's parent nodes.

I've tried not floating the parent and setting it to overflow: auto, but that doesn't seem to work either. Is there an easy fix I'm missing?

Hi!

1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers.

2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this?

Thanks

Hi!

Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness)

[HTML]
<div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div>
[/HTML]

Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this?

Thanks

I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further:

Many thanks

Robert
______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="description"
content="test"
content="test">
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" />
<link rel="stylesheet" href="testcss.css" TYPE="text/css">

</head>

<body topmargin="0">

<div align="center">
<table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50">
<span class="menu">
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td>
<td width="41" align="center" bgcolor="#243348" height="50">
<p align="center"><a href="item8.htm">item8</font></a></td>
</span></table>
</div>
</body>


______________________________

.menu a {text-decoration:none; font-family: arial; font-size: 10pt
}

.menu a:link {color:#FFFFFF;
}
.menu a:visited {.color:#FFE2A8;
}
.menu a:hover {color:#FFE2A8;
}
.menu a:active {.color:#FFE2A8;

This layout I've created seems to be working in Firefox Mac & PC, Internet Explorer 6 and Safari, but on Opera for Mac (haven't tried it on Opera for PC yet) I'm having some trouble.

The div "footer" acts as a means to hold the copyright as well as the background for the very bottom of the blog section. This works correctly in all the browsers I listed, but in Opera the div covers up the blog section.

This does happen in the other browsers if I place the footer div in the code after the blog div (where I originally had it), but moving it before the blog div doesn't resolve that problem in Opera.

Anyone have any ideas?

Hi all,

I've got a jpg background image using CSS and it's not displaying in Opera, but it is in absolutely every other browser back to IE 5.0.

If I change the image to a gif, it displays fine. Is there any reason why the jpg wouldn't display in Opera?