CSS - Gap Between Elements In Ie And Opera

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

I have created a navbar to be absolutely positioned in the header; works fine in FFox and IE/Win. Works in Safari as well. But Opera 7/Win and IE 5/Mac don't treated the positioning correctly. I've got the XHTML to validate. Don't know what's up. Take a look:

http://dev3.witechcolleges.org/

Thanks.

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?

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

Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image.

Here's part of the css code:

Code:

body
{
	background: #FFF url(img/bg_body.jpg) no-repeat bottom right;
}

How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye.

Hi guys,

I am currently building a website for my union service, and need some help with CSS; particularly in getting it to render consistantly over different browsers.

Although I use Firefox at home, the only browser available at work is IE5 (currently running under Windows NT).

The Previews:

Internet Explorer 5:


Internet Explorer 6:


Firefox:


Opera:



What I am trying to achieve is for the #navigation div to align with the sIFR header (this is rendered correctly in IE5/IE6). Firefox and Opera seem to offset the header, meaning that the header and #navigation div no longer align.

The 'perfect' rendition seems to be IE6 - if anyone knows what I may need to adjust in me CSS to get this to work consistantly I would really appreciate it.

You can see the beta version of the design at:
http://www.algus.org.uk/xhtml.php

Thanks,



Saj

Hi,

Av just check my website in Opera for the mac and found something annoying..

I have problems with my header and footer..

Screenshots:
http://i45.photobucket.com/albums/f56/phi21/Picture1-6.png Header cut off

http://i45.photobucket.com/albums/f56/phi21/Picture2-3.png massive footer


Works fine in everything else.. what could be happening ?

Thanks

www.leehughes.co.uk

See how links went up. how to put them in middle

I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this.

1. Block had some sort of padding or whitespace on the right side for some reason.
2. Search button width is short.

Problem in red: URL
Site: URL

CSS: URL

Can someone give me a solution or work around for this problem.

P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work.

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

My little attempt to create a totally horizontal layout crashed against that crap Opera.

Here's the page, and some piece of code:

Code:

body
{
	height: 400px;
	width: 2000px;
	border-bottom: solid 1px #000;
	background: #fff url(img/bg_body.jpg) no-repeat top right;
	margin: 0px;
}

As you can see, in Opera the background image is not displayed at the top right of the body.. any ideas? I've tried the html width 100% trick but no luck.

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

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.

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. I've redesigned my site using IE 6. The page can be referenced at http://flashdaddee.com/index_new.html.

In order to position the images on IE 6, I've done the following:

#myclass
{
background:transparent url(my_img.gif) no-repeat;
background-position-x:xpx;
background-position-y:ypx;
}

Unfortunately, this does not work with Netscape, Opera, or Firefox. Can someone please give me some directions as to how to accurately position my images on these browsers?
Your help is most graciously appreciated. Thanx.

I intend to write separate pages for each browser and re-direct to the appropriate UA upon detection. If you could provide a script that does this, or direct me where to go to find such a script, I would also be most grateful.