CSS - Navigation Width Problems In Firefox...

Hiya,

I am having some problems with 100% width elements.
As you can see he http://explosiveracing.net/new_design/orange/
CSS: http://explosiveracing.net/new_design/orange/styles.css

The horizontal bars go further than 100% across the page resulting in a horizontal scroll bar appearing.

I have only tested in FF1.5 and IE6 so far but both have the same problem.

EDIT: I have fixed the horizontal bars. I cannot work out how to stop the menu bar expanding further than 100% though.

Any ideas?

Hope someone can help with this i've set this code below

<table width="160">
<tr>
<td><div class="mystyle">some text here</div></td>
</tr>
<tr><td>...some other stuff...</td></tr>
</table>

The div style sets padding, background colour, font colour and a background image that's aligned to the right hand side;

.mystyle {
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background: #003366;
padding: 6px;
white-space: nowrap;
}

The problem is that the div fills the <td>'s 160px width rather than constraining itself to the with of its content, i've tried adding a minimum width of say 10px which seems to work in IE on PC but nothing else. How can i get it to reliably follow the widths of the content and padding??

OK i have a div and inside it i have a flash animation..

i am playing with the width property of div to make it same width as flash however the values are differing between IE and firefox?
in firefox it is 67% and in IE it seems to be 70%!! i have NO other css for that div apart from margin-right/left: auto!!

I'm working on my first website located at http://www.longklaw.com and I started having trouble when I tried to make some changes . I have a header, a middle section (left sidebar, center, right sidebar), and a footer. As you can see, the container seems to be bigger than the total size of the sections and I cannot figure out how to fix it. I figured that it might be a padding/margin issue. I want the page to end where the borders separating the sections on the right sidebar ends. My CSS follows. Thanks in advance for the help.


DIV { margin: 0px;}

body {
margin: 5px 5px 5px 5px;
background-color: #000000;
text-align: left;
}

a {
text-decoration: underline;
}

a:link {
color: #0000FF;
}

a:visited {
color: #8A2BE2;
}

a:active {
color: #0000FF;
}

a:hover {
color: #006699;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

.container {
line-height: 140%;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding: 0px;
width: 98%;
background-color: #FFFFFF;
border: 0px solid #FFFFFF;
}

.banner {
font-family: Verdana,Arial,sans-serif;
color: #000000;
background-color: #FFFFFF;
text-align: left;
padding: 15px 0px 0px 10px;
border: 0px solid #000000;
height: 39px;


}

.banner-img {
display: none;
}

.banner a {
color: #999999;
text-decoration: none;
}

.banner h1 {
font-size: xx-large;
}

.banner h2 {
font-size: small;
}

.navigation {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-size: small;

margin-top: 5px;

border: solid 0px #000000;
}

.navigation table {
border-collapse: collapse;
margin: 0px
}

.navigation td {
border-color: #999999;
border: 1px solid;
}

.content {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
background-color: #ffffff;
padding: 15px 15px 5px 15px;
}

.content blockquote {
line-height: 150%;
}

.content li {
line-height: 150%;
}

.content p.posted {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
line-height: normal;
text-align: left;
margin-bottom: 25px;
padding: 3px;
border-top: 1px solid #999999;
}

.content h2 {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}

.content h3 {
color: #000000;
font-size: small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}

.sidebar {
padding: 0px;
float: left;
width: 20%;
background-color: #FFFFFF;
overflow: hidden;
border-right: solid 0px #000000;
}

.sidebar p {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
line-height: 140%;
text-align: left;
margin: 0px;

}

.sidebar h2 {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3em;
margin-bottom: 10px;
}

.sidebar border {
margin: 0px;
padding: 0px;
}

.sidebar ul {
margin: 0px;
padding: 0px;
}

.sidebar li {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
line-height: 140%;
text-align: left;
list-style-type: none;
margin: 0px;
}

.sidebar img {
border: solid 3px #ffffff;
}

.sidesection {
color: #000000;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
line-height: 140%;
text-align: left;
padding: 15px;
margin: 0px;
border-bottom: 1px solid #999999;

}

.center {
float: left;
width: 57%;
overflow: hidden;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}

.clearer {
height: 1px;
overflow: hidden;
clear: both;
margin-top: -1px;
}

.footer {
color: #000000;
float: left;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
line-height: 140%;
text-align: left;
width: 98%;
padding: 15px;
margin-bottom: 0px;
background-color: #FFFFFF;
border-top: 1px solid #999999;
overflow: hidden;
}

.calendar {
line-height: 140%;
color: #666666;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
padding: 15px;
text-align: center;
margin-bottom: 0px;
border-bottom: 1px solid #999999;

}

.calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

.calendar caption {
color: #000000;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3em;
}

.calendar th {
text-align: center;
font-weight: normal;
}

.calendar td {
text-align: center;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 0px;
text-align: left;
border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
width: 80%;
}

Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox.

Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible)



I'd like it to appear in firefox the same as IE..

Heres the html code:

Quote:
<div id="Navigation">
<ul>
<li><a href="main.htm"><b>Homepage</b></a></li>
<li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br>
<li><a href="home.html">Cool Sites</a></li>
<li><a href="home.html">My Opinions</a></li>
</ul>
</div>


Css code thats formatting the <div> and its contents.

Quote:
#Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; }

#Navigation ul { list-style: none; margin: 0; padding: 0; border: none; }

#Navigation li { border-bottom: 1px solid #202020; margin: 0; }

#Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; }

#Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; }


I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.>

Thank you for your help

Hey,

I need to get a div to expand to the full width of a page in firefox. IE seems to do this automatically. Say I have this layout;

Code:

<div style="float:left; width:30px;">first column</div>
<div style="float:left; width:100%;">second column</div>

In firefox, this puts the second div on a new row and expands it to the full width of the page;

| 30px |
| 100% |

I want it to stay on the same row as the first div, and use the available space;

|30px| |left over width (100%)|

I can get this working in IE but i'm struggling with firefox...

Thanks for your time,

-Ross

Hi!

I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image.

This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout...

I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go.

The URL in question is here .

Any help would be mightily appreciated!
-BBD

Hi all,

I have a mysql database with a list of milkshake flavors. I want to pull those out and display them into 4 columns. No problem there.

The hangup is that the width of these columns isn't going to be the same (because the list of milkshake flavors is going to be updated regularly and the display of them is dynamic as well). So, I can have it kick out 4 columns no problem and the width of these columns is based on the longest name in that column (which is what I want, so everything is OK there).

The problem is that I want these 4 columns to be grouped together and centered on the page. I got it working in Firefox by making a container div and giving it a {display: table} value... works perfectly. However, that's not the case in IE. In IE, the container div is the width of the entire page and the columns are all left-aligned.

Here's the page in question and my code is below. Any help is greatly appreciated. Thanks!
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style type="text/css">
.mcontainer {
  border: 2px solid black; 
	display: table; 
	margin: 0 auto; 
	}
.mcol {
  border: 1px solid blue; 
	float: left; 
	padding: 0 5px; 
	font-size: .75em; 
	text-align: center; 
	font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; 
	}
.emptyspacer { 
  clear: both; 
	margin: 0; 
	padding: 0;
	}
</style>
</head>
<body>

<div class="mcontainer">
<div class="emptyspacer"></div>

<div class="mcol">
Almond<br>
Almond Joy<br>
Amaretto<br>
Apple<br>
Apple Pie<br>
Banana<br>
Banana Pineapple<br>
Banana Split<br>
Black & White<br>
Blackberry<br>
Blueberry<br>
Butterfinger<br>
Butterscotch<br>
California Blend<br>
Caramel<br>
<strike>Caramel Apple</strike><br>
Caribbean Rum<br>
Cheesecake<br>
Cherry<br>
Chocolate<br>
Chocolate Banana Peanut Butter<br>
</div>

<div class="mcol">
Chocolate Cherry<br>
Chocolate Covered Banana<br>
Chocolate Mint<br>
Chocolate Raspberry<br>
Cinnamon<br>
Coconut<br>
Coffee<br>
Cookie Dough<br>
Creamsicle<br>
Creme De Menthe<br>
Double Chocolate<br>
Egg Nog<br>
Grape<br>
Grapefruit<br>
Hazelnut<br>
Heath Bar<br>
Irish Cream<br>
Island Breeze<br>
Key Lime<br>
Kiwi<br>
Kiwi Strawberry<br>
</div>

<div class="mcol">
M&M<br>
Macadamia Nut<br>
Mango<br>
Mango Kiwi<br>
Mango Peach<br>
Maple Walnut<br>
Mocha<br>
Mounds<br>
<strike>Mud Pie</strike><br>
Neapolitan<br>
Nerds<br>
Orange Pineapple<br>
Oreo<br>
<strike>Oreo Green Mint</strike><br>
Peach<br>
Peanut Butter<br>
Peanut Butter & Jelly<br>
Peanut Butter Cup<br>
Pear<br>
Peppermint<br>
<strike>Peppermint Oreo</strike><br>
</div>

<div class="mcol">
Pina Colada<br>
Pineapple<br>
Pistachio<br>
Raspberry<br>
<strike>Raspberry Cheesecake</strike><br>
Reese's Pieces<br>
Root Beer<br>
Rum<br>
<strike>S'mores</strike><br>
Snickers<br>
Strawberry<br>
Strawberry Banana<br>
Strawberry Orange<br>
Swiss Chocolate<br>
Three Musketeers<br>
Toffee<br>
Vanilla<br>
Watermelon<br>
</div>

<div class="emptyspacer"></div>
</div>

</body>
</html>

Hi,

The site I'm developing is:
http://www.jaysonsgroup.com/index2.html

It's only a temporary page..some old <table> tags are in there..which don't validate as XHTML. But, I come across many IE 5.0 - related problems for many of my sites..i.e. even those that validate under W3C etc. So I'm just asking generally, does anyone know a site that has fixes for IE 5.0 bugs? My sites seem to be fine on most browsers except this one.

In regard to the above link, I had some major problems with IE 5.0 on the middle area (i.e. the images & text under "news" and "login").

The basic HTML code for that:

Code:

<div class="outerblock">
		<div class="news">

			<div class="news_left"><div class="news_left_text">My text</div></div>

			<div class="news_mid"><img src='images/sinhala.gif' width='431' height='286' alt='' /></div>

		</div>

		<div class="login_right">
			my login table
		</div>
</div>

and the CSS for that:

Code:

	.outerblock {
		width: 100%;
		overflow:hidden;
		display: block;
		clear: both;
	}

	.news {
		width: 607px;
		overflow:hidden;
		float: left;
		border-right: 1px solid #C5C5DD;
	}

	.news_left {
		width: 163px;
		float: left;
		overflow:auto;
		display: block;
		background: url(../images/home_worldwide.gif) no-repeat;
		padding: 110px 0px 0px 0px;
	}

	.news_left_text {
		padding: 0px 0px 0px 5px;
		color: #3B537D;
		font-family: Verdana, Arial ; 
		font-size:7.5pt ; 
		font-weight:normal; 
		line-height: 13px;
	}

	.news_mid {
		width: 440px;
		height: 300px;
		float: left;
		overflow:hidden;
	}
	.login_right {
		width: 160px;
		height: 250px;
		padding: 50px 0px 0px 0px;
		float: left;
		background: #ECEDF2;
		border-right: 1px solid #C5C5DD;
		border-left: 2px solid #FFFFFF;
		overflow: hidden;
	}

One problem I had (on IE 5.0) was that the middle 'news_mid' image was overflowing, positioned just below the 'news_left' area. The widths etc are all correct because the container width is 771px. So the entire area should just fit and not overflow (even though in IE 5.0 it did). The 'news' overflow property was AUTO, and I fixed the problem by specifying the overflow:hidden.

Likewise, the 'login_right' div was overflowing just below the entire news section, and not to the right as it should have been. Once again I fixed this by specifying overflow:hidden for the outer div.

Is it common to use overflow:hidden for things like this? Or is there a more appropriate fix?

Another small problem I noticed for IE 5.0 :
http://www.jaysonsgroup.com/ie5win.jpg (screenshot). The login_right background does not extend all the way. The height of the div should be 250 pixels + 50pixels on the padding - so 300 pixels total. But IE 5.0 ignores the 50pixels padding and leaves the background with a height of 250px.

Thanks very much in advance!

Hi, I'm having a problem, I'm using the chunk of css code below to make a horizontal menu that I want to run across the 895 px #container that I've created. The menu fits perfectly in IE, but in firefox it overflows the last menu button the next line. How do I get the css menu to be the exact same width in firefox and IE??

Here's the css:

Code:

#snav ul

{
float:left;
width:100%;
padding:0px;
margin:0;

list-style-type:none;
}
a
{
float:left;
width:7.9em;
text-decoration:none;
text-align:center;
color:black;
background-color:#eed9ac;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:#e7bb5b; text-decoration:underline; color:#9b2f1e}
li {display:inline}

Thanks for looking!

As simple as the problem sounds, Im completely puzzled by what could be going wrong.

The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE.

Here is the code:

Code:

  #left {
    width:100%;
    height:598px;
    padding:0;
    background: #EEF;
    display: table-cell;
    background: url("bg.gif") top left repeat-x;
    }

Anyone have any ideas?

The template I am working on is a simple HTML page that I want to modify to work in Joomla.
However the look of the site is not quite the same in Firefox (where it looks good) and IE8 where one part of it I could not make right for two days. The left sidebar is shorter and the content right side is shorter and not aligned. I am aware that is something small but I could not get it right.

Please help. The URL is:

compasstgdotcom/~orak

the css in questions is: base.css

Thank you all

Hi there!

My website (Yes.. I'm aware I use tables. Sue me. :P) has been driving me crazy CSS-wise. width:100% doesn't seem work right! Well, I know it does... but it hasn't been, and I have no idea why. As you can see in that page (and the forums too....) the black-bordered table underneath each subheader stretches too far in everything but Firefox. In Opera, not only does the black-bordered table stretch too far, but the subheading stretch... too little. O_o I am at a complete loss for words at this.

Also, might I point out that when you visit a song on the site, the file type navigation (#sheetNav in the CSS file) works just fine?

Any help would be GREATLY appreciated. For your convenience, here is the CSS file. Yes, it's something of a mess... forgive me.

http://apollomix.com/master.css

Thanks a lot!

I use this in IE:

<span style="width:22"></span>

as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all.

What is the acceptable cross browser method of doing this?

Thanks in advance.