CSS - Problems With Css Menu In Firefox & Opera

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

Hi everybody,

i'm quite new to the whole css stuff, but i managed to write some code to my own satisfaction. The problem is that it is not properly presented in Opera 7.51, which i am using. Though it shows to my wishes in IE.

the test version can be found at http://users.pandora.be/jef_patat/test/index.htm and the stylesheet at http://users.pandora.be/jef_patat/test/visualstyle2.css

It is my intention to have four areas that can stretch in function of their content (the menu, news, validation and main content areas). This works fine in IE but in Opera I get some strange blank areas which i can not solve.

I know my css is not perfect but i did the best i can. I would like to use another stylesheet for people with lower bandwiths, this stylesheet is found at http://users.pandora.be/jef_patat/test/visualstyle3.css
With this stylesheet one can clearly view i mess up. It should give a simular result as the other stylesheet so i can use the same html code. The outer black border should stretch down the page and i would like some space underneat it as well.

Anyone can help?

Kind regards

Jef Patat

My navigation resizes and moves in every browser except in Opera. Also, the placement of the navigation in Opera is incorrect. I have a feelin the root of the cause is that I've set a % width on my nav div. Is there a way around this mess?? A hack maybe? My site is http://www.marginalspace.com . You will need to click on the white square on the right-hand column to get the style in which this problem occurs. Any help would be greatly appreciated. The stylesheet in question is white.css .

Amit

Ok, I've created an XHTML/CSS site that looks fine in IE5+, Mozilla, FireFox and Netscape.

It almost works in Opera and on a Mac but it seems something slightly is going wrong.

The biggest problem is on the Mac, while the page looks fine, for some reason part of the left div goes over to the right, making the right div drop below it. I am sure it is just a CSS problem with the position or maybe float but if I could get someone to pin point the problem it would save me a lot of time.

Also on the Mac and in Opera, my columns have a gap at the very bottom of the page somehow, not quite sure why? They seem fine in the other browsers.

Also, just another quickie, in IE4.0 does it not support columns of floats? My site just expands the full length and ignores the float left rule, any ways to get round this?

The site URL is: www.gladiatorszone.co.uk/home/gladiators/

Thank you in advance to anyone that can help.

Hello ppl,

I have a problem about 6 div's which are displayed inline.

Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another

here is the link http://www.immo-land.ro/test/div-inline.html

and below is the code which I wrote for every DIV

Code:

<div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> 
<a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> 
<br> 
Text here 
</div>

any ideea why is all that mess in firefox ?

10x in advance

See ya all

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.

First of all here is the page: http://xander6669.com/

It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS:

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title>
<link rel="stylesheet" href="body/body.css"/></head><body>
<img src="images/border1.gif" alt="" height="5" width=779"/></body></html>

CSS:
Code:

body {
margin: 0px;
padding: 0px;
}

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

Im novice to CSS, im makin my first one.
I have this problem, i made my class and then i did the a:hover with that class but it is not shown in firefox and opera, works fine in IE.

Am i forgetting something? how do i fix? here's my code:

Code:

body {
	background-color: #1A1852;
	background-image: url(../imagenes/fondo2.gif);
}
.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000000;
	text-decoration: none;
	}
a:menu:link {
	text-decoration: none; 
	}
a:menu:active {
	text-decoration: none;
	}
a:menu:visited {
	text-decoration: none;
	color: #000000;
}
a:menu:hover {
	font-weight: bold;
	text-decoration: none;
	color: #000000;
	}
.actual {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
	}

.descarga {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFCC;
	text-decoration: none;
	}
a.descarga:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #FF9966;
	}

.texto {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.pie {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	font-size: 10px;
}
.titulo { 
	color: #CC66CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small; font-weight: bold;
}
.vinculo {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small; color: #FFFFCC;
}
.tabla {
border-style: dashed;
border-width: thin;
border-color:#CC66CC;
}

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

Hello. I've spent the past week making my web page. It is currently hosted on my laptop. When I finalize it, I will upload it to a proper hosting service.

I have a job interview for a co-op job for searstravel.ca tomorrow, and I want to make sure my website works across all browsers.

My webpage is at URL.

If you open the page in IE, you will notice a horizontal white space just beneath the image at the top. In Mozilla (suite/Firefox) and Opera the site displays just fine.

I've had the site looked at by a number of friends who are more adept at CSS than me, but to no avail.

I was hoping that someone in here might spot the cause of the display bug.

The CSS file is located at URL.

Thanks for your help everyone!

Hi,
I am very new to CSS and am having a small problem with a breadcrumb that moves in different browsers. It's in the right place in IE but it moves down a little in Firefox, and moves even further down in Opera.

If you look at the page it is the red "Home" above the menu bar (well it is in IE and Firefox, it is behind the menu bar in Opera).

I know that IE doesn't always show things like it should, but what I wanted to know was - is it me or them? and if it is them which one is right? If it's me could you point me in the right direction please.

The page is URL

The 2 stylesheets that are used are;

URL
URL

I would really appreciate some advice.

Thanks

hi,

http://notabene.morator.com/main.php is displayed ok in all 3 browsers - IE, Opera and Firefox.
But try to login with username "test" and password "test". in IE and Opera the horizontal menu gets messed up. please view the source after login and tell me where the problem is if you can find it.
The weird thing is that actually it is the same main.php page before and after login, only difference is that in menu "logout" link is displayed instead of "Login" link. all other stays same. I dont know WTF is happening with that.

any help very appreciated.

regards

Notabene

-------------
FIXED

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>