CSS - Problem With 100% Width- Divs And In Firefox

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

Here is the relevant HTML code:

<table>
<tr>
<td>
<div style="float:left;">
<div class="middle"><div class="r"><div class="l">
<a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a>
</div></div></div>

<div style="width: 200px;">
<a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a>
</div>
</div>

<div style="float:right;">
<a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a>
<a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a>
</div>
</td>
</tr>
<tr>
<td>
<div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div>
</td>
</tr>
</table>


And the relevant CSS code [which just sets the background of the tab]:

.l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;}
.r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;}
.middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;}


This is the output (i can't post images?)
http://i34 [.] tinypic [.] com/4hpqag [.] png


The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ...

Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line.

Help? Thanks in advance.

Hang on to this post, I have found a couple of answers, so will post again when i get stuck!


Charlie

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>


<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>


Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent.

The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally?

I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities.

Here is the current CSS I'm using:
Code:

#test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}

Hi folks,

I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want:
I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this:
Code:

________________________
l                       l
l  fluid  fix   fluid   l
________________________

restrictions:
i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF ....

i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo

thanx!
i want to redesign the page i have to only be displayed with floats and margins and no more positioning ....

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

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.

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!

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!

Does anyone know why firefox and netscape would interpret a div differently than IE6 and Opera? Here is my CSS:

Code:

#featured_prod{
	background-image:url(images/featured_prod.jpg);
	background-repeat:no-repeat;
	color:#000000;
	font:Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:center;
	width:350px;
	height:200px;
	position:absolute;
	padding:160px 20px 20px 130px;
	left:16px;
	top:21px;
}

and the markup:

Code:

<div id="featured_prod">
   <a class="mylinks" href="">Click here for more information.</a>
</div>	

Okay, everything looks okay to me in the code but it does this in both firefox and netscape:
cick for image

Notice that the red highlight is the outline of the div. And this is how it looks in both IE6 and Opera7:
click for image

The problem is that the text "Click here for more information" does not line up correctly due to the different browser interpretations. Any wisdom?

I'm having a layout problem in firefox. In IE the layout is just how it should look, but in firefox, the dynamic links on the left side overlap (one halfway on top of the next) and the top div is messed up as well. If I add an extra line break after each menu item, it works out in firefox, but is too spread out in IE. Anyone out there have any ideas?

the site is at:
http://meganmumford.com
the css is at:
http://meganmumford.com/megan_css.css

Hello all.

This is a problem I am encountering on many placing:
when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px;

This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels.

Does anybody know how to get of this bug in Firefox?