CSS - Css Looks Good In Firefox/mac But Terrible In Ie Mac/win

Hi all,

My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place!

If anyone would be kind enough to view:
cavendish-cs.co.uk/beta/

You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look

Any help greatly appreciated

Thanks

Craig

Hi. I have a site located at http://studentweb.stcloudstate.edu/scad0504

In IE7 and FF3, it looks great and works great (the menu nav in particular). However, in IE8, once a menu item is scrolled over, most of the page turns to white.

Screeny:


Can anyone help me figure out why it works this way?

Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days....

My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them.

Here's the page: http://www.triptrop.com/main.html

My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column.

Don't pick on my about the colors, I'm just messin around right now

Any help would be helpful (by definition)

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

Alright, I am just doing an exercise that I thought up for myself, and it's just a real basic CSS layout, except I can't get it just right.

Pretty much, I have a div that if the content it holds is less than the viewers screen height, I still want the background to extend to the full height of the screen. Though, if the content exceeds the viewers screen height, I want the background to continue to stay behind the content and always match up with the bottom of the page.

My troubles are as follows:

Problem #1: Absolute Positioning on content Div
iammitch.com/csstest/index.html
iammitch.com/csstest/index2.html

The white background seemingly covers the whole screen in both cases, except if you scroll down in the first example, turns out the bg only covers the INITIAL VIEWABLE area of the screen.

Problem #2: Relative Positioning on content Div
iammitch.com/csstest/index3.html
iammitch.com/csstest/index4.html

Now if you notice in this case for the text that exceeds viewable screen area, the background extends with it, instead of just filling the initial screen area. But, in the second example the background is the height of the Div's content....

So notice how the problems swap with the different positions? I've been trying to get this right for several hours now, and it's just not happening.

If anymore information is needed, or you want an image of the exact layout i'm looking for let me know.

I appreciate your help, thank you.

I've mucked up my css a bit. Works great in IE but not in FireFox.

Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site.

Causeway Lighitng

And here is the css (it the nav2 portion that controls the top menu)

Code:

#nav, #nav ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 100%; 
	} 

#nav2, #nav2 ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 135px; 
	}
	
#nav li, #nav {
margin:0;
padding:0;
}

#nav2 li, #nav2 {
margin:auto;
padding:0;
}

#nav ul li {
   position: relative;
   width:130px;
   line-height:14px;
   padding:0;
    margin:0;
   }
   
 #nav li ul {
 position: absolute;
 margin-left:134px;
 margin-top:-24px;
 display: none; 
 }
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
	
	display: block;
	text-decoration: none; /* removes the underline */
	color: #777;
	background: #fff; /* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	}
	
#nav2 li a {
	display: block;
	text-decoration: none;
	/* removes the underline */
	color: #777;
	background: #FFCC00;
	/* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	text-align : center;
	}	

/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
	height: 1%;
	margin-left : auto;
}
/* End */

#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */ 

#nav2, #nav2 ul {
	width: 100%;
}

#nav2 li {
	float:left; /* makes the main nav horizontal */
	width:80px; /* Width of Menu Items */
	margin:0;
	}
	
#nav2 li ul {
	position: absolute; /* positions and sets width of submenus */
	display: none;
	float:left;
	margin:0;
	}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */

		 

Hello,

This one doesn't look good on FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
	font-size:10px;
	top:3px;
	width:100%;
}
#layer ul {
	float:left;
	list-style-type:none;
	height:12px	
}
#layer li {
	display:inline;	
	height:12px	
}
#layer a {
	text-decoration:none;
	border:1px 1px solid #990000;
	color:#990000;	
	background-color:#CCCCCC;
	padding:20px;
	height:12px	
}
</style>
</head>

<body>
		  <div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>

Hello,

This one looks good on IE7/FF but not with IE6

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#picture {
	position:relative;
	float:left;
	left:6px;
	color:#ff0000;
	top:15px;
}
.name_txt {
	position:relative;
	margin-bottom:4px;
	float:left;
	font-size:10px;
	width:235px
}	
</style>
</head>

<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>

Hey,

Myspace allows users to customize their profiles with CSS, and what i've done is cover my profile with a blank DIV overlay.

How can I include a flash component in my DIV? I'm trying to include this little flipbook device onto my profile

sothink.com/tutorials/viewtopic.php?t=61

The flipbook you'll see is obviously not hosted by the forums (...I think,) it is hosted elsewhere and the user just included it in her bulletin post. What code allows you to do that? And would it be possible to include such a code onn my DIV overlay?

Thanks,

Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up

Does anyone know whats causing that to happen and how I would fix it

Thanks alot

Ok, firstly, here is the link: www.mstrgaming.com/stars

Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it.

Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't.

I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know .

Thanks!

Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well

I need to link to differnt style sheets to a page and i need it so it will use one if the user has IE and a differnt one if the user is using anything else that works properly. Is this posable and if it is please tell me how? and if theres a way of doing it that uses php i would like to use that method.
thanks

Hi,

Here is the site I am working on:

http://www.pizzaz-lingerie.com/launch.php

It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one.

-CJ

I have been reading alot about how much trouble we get into with IE when trying to center a div. I had a lot of trouble with it and mainly just wanted to have a fixed width site (760px or so) with a thin border all the way around it.

Is the following code a good way to accomplish this?
Code:

<head>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	}

div {
	border: 1px solid #666666;
	height: 100%;
	width: 100%;
	}
</style>
</head>

<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div></div></td>
  </tr>
</table>

</body>

I am planning on having this as my index page and just using an "include" for the different header/body/footer elements.
Would love some advice/opinions.

Hi

Can anyone recommend a good book/course on CSS that they enjoyed/found very useful?

I would rather read one awesome book, then 4 so-so books/courses.

Thanks

Drew

EDIT: Just noticed the CSS resources above. But if someone does have a link to a good ebook (free or not) or hard copy, I would be happy to check it out.