CSS - Horizontal White Gap In Ie, But None In Firefox Or Opera

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

So I'm having what I think are CSS issues with a site...

I'm supposedly a "new user" though I've been registered for a long time, and just not used this account in a long time, so I can't show my URL's here... tried to abbreviate them... I'm not sure how to show you what the issues are if I'm not allowed to post URLs. Anyone with any suggestions there?

This looks fine in IE, but not in Firefox.

On (blocked) the main content that sits in the middle of the page sits in an 800px div called "page".

I've set the background color for that to be white: FFFFFF, which Internet Explorer seems to understand. But Firefox seems to be leaving "page" to be transparent. This means that either the left div (content) or the right div (reef-job) ends when the content inside of it ends, rather than continuing down to the bottom of the "page" content.

I'm not sure how to fix it for Firefox.

Again, it's all the pages inside of (carrieandjonathan [dot] com /island-reef-job) and the stylesheet is at (carrieandjonathan [dot] com / island-reef-job / mt-island-reef-job.css)

#page {
width: 800px;
margin: 0 auto;
padding: 0px 0;
background-color:#ffffff;
}

Any help is greatly appreciated.

Thank-you in advance!

Warmest,
Jonathan

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 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

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?

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;
}

I'm hoping I can get some guidance on why I can't get this popout menu to work!

I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too.

If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me!

Thanks in advance!

Chelsea

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

Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks.
Code:

* {
    margin:0 auto;
	padding:0;
}
h2 {
	font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#845697;
}

a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}

body {
	background:#000000 url(images/body2.jpg);
	background-repeat:repeat;
	background-position:top left;
	font-size:90%;
	margin:0 auto;
	padding: 24px 0;
}

#outer {
    margin:0 auto;
	width:80%;
    min-width:40em;
    max-width:70em;
	border:10px solid #EEEEEE;
	border-width:0 5px;
    background:#EEEEEE;
}

ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

hr {display:none}


#header {
	background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#FFFFFF;
    background: transparent url(images/banner2.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#FFFFFF;
	text-decoration:none;
}

ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#FFFFFF;
   	border-top:2px solid #444444;
   	border-bottom:2px solid #444444;
}
#nav li {
    list-style:none;
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	display:block;
    text-align:center;
	background:#000000;
}
* html #nav li {
	width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#444444;
	margin:1px;
	background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}

ul#nav li#active {
	background:#FFFFFF;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000000;
	text-decoration:underline;
}

#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#sub {
	width:74%;
	float:left;
	position:relative;
}

#center {
	width:65%;
	float:right;
}
#left {
	width:33%;
	float:left;
}
#right {
	width:25%;
	float:right;
}
 

#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}


#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
	
}
#footer p {
	margin:1em 1em 1em 0;
	text-align:center;
	padding: 21px 0;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
	
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

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;

I'm pretty new to CSS (only just begun). I've been teaching myself using a number of resources, but I realise the best way to learn is to practice. I just don't think I'm doing it right.

I want to have the main content of the page floating in the centre of the window, which works in IE but not firefox or opera.

I also want san serif fonts, but these also aren't being displayed in Opera or Firefox.

Any ideas?

Here's the code:
Code:

/*** TEXT AND TAG STYLES ***/

body {
	font:Geneva, Arial, Helvetica, san-serif;
	color:#000000;
	text-align:center;
	background-color:#003366;}

h1 {
	font:Geneva, Arial, Helvetica, san-serif;
	color:#336699;
	text-decoration:underline;}

h2 {
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#336699;
	text-decoration:none;}
	
h3 {
	font:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;}

a {
	color:#3366CC;
	text-decoration:none;}

a:link {
	color:#3366CC;
	text-decoration:none;}

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

ul {
	list-style-image:url(../images/bullets/bullet1.gif);}

ul ul {
	list-style-image:url(../images/bullets/bullet2.gif);}

em	{
	color:#336699;
	text-decoration:none;
	}

/*** PAGE DIVISIONS ***/

#container {
	width:772px;
	height:600px;
	top:7px;
	text-align:left;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	background-color:#FFFFFF;
	padding: 10px 10px 10px 10px;}
	
#masthead {
	height:100px;
	width: auto;}
	
#navbar {
	position:relative;
	top:2px;
	width:auto;
	height:15px;
	padding: 3px 6px 3px 6px;
	border-top: 2px solid #000033;
	border-bottom: 2px solid #000033;
	background-color:#336699;
	color: #FFFFFF;}
	
#content {
	position: relative;
	top: 2px;
	border-color:#336699;
	border-style:groove;
	border-width:1px;
	width: auto;
	height: 438px;
	padding: 10px 7px 10px 12px;}

.piece {
	position:relative;
	float:left;
	width: 522px;
	height: 422px;
	z-index: 1;
	padding: 12px 6px 3px 12px;
	border: 1px solid #000000}

.rightspace {
	position:relative;
	top: 0px;
	float:right;
	width:190px;
	height:422px;
	z-index: 2;
	background-color:#CCCCCC;
	padding:12px 6px 3px 8px;}
	
#bottombar {
	height: 12px;
	margin-top: 12px;
	top: 12px;
	border-top: 1px solid #333399;
	background-color:#00FF33;}

also, i don't think i'm using classes properly, but I think I just realised that.

midgetporn

I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it.

geekville.net

Any ideas?

Thanks!

EDIT: Nevermind, I made it work. 2am is a good time to stop writing css.

Hi everyone

A bit of a call for help with some niggly issues - all found on the following page and css:

http://www.crashingbydesign.com.au/rsaa/index.html
http://www.crashingbydesign.com.au/rsaa/home.css

1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!!

2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on??

All help appreciated.

Cheers

Bevester

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>

In IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x).

Why would Firefox do this? How can I correct this? Thank you.