CSS Explorer trouble (of course)

easilyi · 10-28-2004, 10:52 PM

Hi,

I am super frustrated with explorer. I cannot get it to read my CSS correctly no matter what I do. I am learning CSS so I may be missing a simple fix and that is why I am here.

My problem: explorer will not recognize the width of one of my DIVs

Using the CSS below:

Code:

#rap { 
	align: center;
  	width: 746px;
  	margin-left: 0px;
  	margin-right: auto;
	margin-top:20px;
	margin-bottom:20px;
	color: #4D5629;
	font-size: .7em;
	border: 1px solid #000000;
	background: #41819E;
	bottom: auto;
	} 


 #content {
	position:relative;
	left:10px;
	top:150px
	color: #000000;
	width: 522px;
	padding-bottom: 40px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: left;
	float: left;
	voice-family: "\"}\""; 
  	voice-family: inherit;
  	border: 1px solid #1E3674;
  	background: #74B4CF;
	}

 #storycontent {	
	width: 500;
	list-style-type: none;
	margin-left: 0;
	margin-right: 0;
	padding-right: 10px;
	padding-bottom: 60px;
	padding-top: 5px;
	padding-left: 10px;
	border: 1px solid #1E3674;
	background: #ffffff;
	}
	
 #menu {
	position:relative;
	left:-10px;
	top:150px
	color: #4D5629;
	width: 145px;
	float: right;
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 10px;
	border: 1px solid #1E3674;
	background: #74B4CF;
	}

It is used in my html like this:

Code:

<html>
<body>

<div id="rap">

    <div id="content">
 
        <div id="storycontent">

        </div>

     </div>

    <div id="menu">
  
    </div>

</div>

</body>
</html>

The 'content' div in red is the one that is causing trouble right now. In FireFox it works perfectly, but in Explorer it just stretches across the page and messes up all the formatting. Any ideas on how to work around this? I have been searching but have not come up with a working solution.

Thanks!

easilyi · 10-29-2004, 02:46 PM

Well, i gave up on trying to make my old layout work.

I made a few modifications by dropping one of the divides, switching the location of the divides and changing several margins and finally got something that still looks pretty good and so far works on Safari, FireFox and Explorer.

What a pain CSS/CSS2 is (or I should say what a pain certain browsers are) when trying to get a consistent look across the different browsers.

Still if anybody wants to share any tricks I would love to hear them.

ender · 10-29-2004, 03:19 PM

One site that I find invaluble for CSS/HTML cross-browser coding is www.quirksmode.org It is a one-stop source for finding out what works in browsers and what doesn't, and the different gotchas that one will encounter. Just my $.02

-Ted

easilyi · 10-29-2004, 04:24 PM

That site looks great, I will check it out some more.

Thanks for the link!

buchannon · 11-11-2004, 12:32 PM

Quote:

left:10px;
top:150px
color: #000000;

I noticed you forgot a semicolon after the top:150px; part.

Redline · 11-11-2004, 03:20 PM

I've got some CSS trouble with explorer also. I swear when you build a website, you have to build it, then rebuild it for explorer

So does explorer not recognize the CSS hover event on table elements? I have an image showing on rollover on my navigation bar and it works fine with Mozilla based browers, but nope not I.E.

buchannon · 11-11-2004, 03:59 PM

For some reason in IE, the table property breaks any previous settings. You have to re-define them within the table for them to work. It's annoying to not be able to place whole-page div tags and stuff.