CSS - Looks Great In Browsers, But Nooooo In Ie!

I'm pretty green with CSS (okay, ALL of html )

I used a template from Mollio.org, then modified it, problem is things just dont look right in IE.

url:
http://www.m87-blackhole.org/foo/

css file:
http://www.m87-blackhole.org/foo/css/wushuwest.css

js
http://www.m87-blackhole.org/foo/js/common.js

The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that?

Any ideas, pointers or resources?

Thanks,
Mike

EDIT: solved, can be closed

Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work?

Here is the url:

http://www.westcadet.com/designs/index.htm

Here is the CSS code snippet that is making this all work

Code:

/*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
	width:618px;
	height:100px;
	vertical-align:top;
}

#NavMenu {
	width:600px;
	padding-top:22px;
	
}

#NavMenu ul {
	list-style: none;
	margin-left:22px;
}

#NavMenu li {
	float: left;
	padding-left:8px;
	padding-right:8px;
}

#NavMenu li a {
	color:#FFFFFF;
	text-decoration: none;
}

#NavMenu li a:hover {
	color:#EB2A2D;
}

.NavChosen {
	background-color: #858181;
	color:#FFFFFF;
}

Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox:

http://www . restonheights . com/

However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF.

Can anyone recommend an IE hack that would get that feedback div to behave?

Check out this site (WIP)... the issue specifically is with the Screenshots table...

Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect.

Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page...

I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images.

What makes IE decide to expand the <div> tag automatically.

Here's the code pertaining just to the screenshots section.

Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks!

the CSS:
---------------------------------------------------------
.screenshots_table {
width: 100%;
border: 1px solid #000;
backgroung-color: #061840;
line-height: 15px;
}

#screenshots_table_overflow {
overflow: auto;
padding: 0px;
display: block;
}
---------------------------------------------------------

the html:
---------------------------------------------------------
/* --- START SCREENSHOTS CONTAINER --- */
// establish the number of screens in the directory
$dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/";
$screen_count = count (glob ($dir_path . "screen*.jpg"));

echo"<td colspan='5'>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
/* start screenshots details tab */
echo"<td>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
echo"<td><img border='0' width='38px' class='display_block'";
echo"src='images/tab_left.jpg'></td>";
echo"<td width='100%' background='images/tab_bg.jpg'></td>";
echo"<td><img border='0' class='display_block' width='70px'";
echo"src='images/tab_screenshots.jpg'></td>";
echo"</tr>";
echo"</table>";
echo"</td>";
/* end screenshots tab */
echo"</tr><tr>";

/* start screenshots */
echo"<td>";
echo"<div id='screenshots_table_overflow'>";
echo"<table width='100%' border='0' class='screenshots_table'";
echo" cellpadding='0' cellspacing='0'>";
echo"<tr>";

// iterate through loop and display linked screenshots as req'd
for ($i = 1; $i < $screen_count + 1; $i++) {
echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>";
echo "<a href='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox'
class='horizontal'><img border='0' class='border'
src='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/small" . $i . ".jpg' /></a>";
echo"</td>";
}

echo"</tr>";
echo"</table>";
echo"</div>";
echo"</td>";
/* end screenshots */
echo"</tr></table>";
echo"</td>";
/* --- END SCREENSHOTS CONTAINER --- */
---------------------------------------------------------

I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages.


Here is one of the pages I am having trouble with in IE:

http://worldwidemediaproject.com/tvrating.php

You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera.

The strange thing is this one appears fine in IE:

http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all

but this one doesn't:

http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all

The only real difference is that the table size is larger in the pages that have display problems.

Is there some kind of IE hack that I need to apply?


Many thanks....

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J

Hi!
I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox.

I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks


Anyway, the site is.... blocked



and the CSS

#shoppinglist1 li {
float:right;
list-style: none;
display:block; }

#shoppinglist1 a{
width:100px;
height:20px;
text-decoration:none;
background-image:url(images/shoppingmenu-bgsmall.gif);
background-repeat: repeat;
background-position: center center; }

#shoppinglist1 a:hover {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-hover.gif);
background-position: center center;
}

#shoppinglist1 a:active {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-active.gif);
background-position: center center;
}

and the HTML

<div id="shoppinglist">
<img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/>
<ul id="shoppinglist1">
<li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li>

</ul>
<img src="images/shoppingmenu_bottom.gif" />
</div>
Thank you so much for your help!

Fun title

anyway - pretty straight forward question :

essentially i have 2 divs, we'll say Div A and div B -- now heres their relation :

Code:

<div id="a"> 
  <div id="b">
  </div>
</div>

=====
css info : 

/*DIV A*/

#pageContent {  
position : absolute;
display : block;
top : 6.75em;
left : 38em;
width : 340px;
overflow: hidden;
height : 19em;
z-index: 2;
font-family :arial;
font-size : 12px;
color : #c8c8c8;

}

/* DIV B */

#scrollo { 
overflow: scroll;
width : 150px;
height : 150px;
margin: .1cm;
z-index: 1;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}

in my CSS file, DIV A has a specific Width / Height set -- AND -- an "overflow" setting of "hidden" ( aka hides anything that exceeds its boundries - obviously. )

DIV B has it's overflow set to "scroll"

OK WHY ?

essentially I wish to hide the horizontal scroll bar (since its of no use).


THE CATCH 22 :

Safari : This works fine.

FireFox 1.5.x : Horizontal Scroll bar is still displayed.


3 cheers for standards right? Anyway - I was curious if anyone has encounted this, and if so, knows a work around .

Thanks !

edit: The child being Z-indexed lowwer then the parent was just a "logic attempt" on my part - it does not change the outcome if its zindexed to the same or high lever.

Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink)

Thanks for your help

Hey All:

Its that time again- testing my pages in different browsers. I have browser cam for another 7 hours, this is my snapshot of the page I am testing.

Ok, this is the first time I am testing my code. Any reason why older browsers are not interpreting my CSS correctly? Maybe something I should know about older browsers.

Any feedback is helpful- thanks

My web site (URL address blocked: See forum rules) is causing me problems with CSS since I have reworked it.
If you look at my web pages in Internet Explorer they look perfect. In Firefox when loading some of the pages the top logo blinks and takes a few seconds to load. In Opera some pages move slightly to the right.
I know the problem is related to the length of the center div but I have no idea how to fix this unless I make the small centers longer.
Also my previous version of this site just used one image. Logo.gif was in the background.
I have put Logo.gif in the header and have used GREEN.jpg as my background now.
MY CSS
body {
background-image: url(../images/GREEN.jpg);
}
div.container {
position: relative;
margin: 0 auto;
width: 746px;
height: 840px;
}
#header {
height: 100px;
width: 746px;
background-image: url(../images/Logo.gif);
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav {
position: absolute;
top: 110px;
left: 55px;
height: 20px;
width: 640px;
}
#left {
position: absolute;
top: 160px;
left: 0px;
width: 124px;
}
#center {
position: absolute;
top: 160px;
left: 130px;
width: 441px;
height: auto;
border: solid;
}
/* right div at this time has been made invisible. Maybe later add Flash content*/
#right {
position: absolute;
top: 160px;
left: 600px;
width: 130px;
height: 100px;
}
/* this div belongs on photo pages and shows the alphabet on the right.Takes place of right div */
#navalpha {
position: absolute;
top: 160px;
left: 600px;
width: 100px;
height: 130px;
font-family: "Courier New", Courier, monospace;
border: solid;
}
/* Start of Top Menu*/
ul {
list-style: none;
margin: 0;
padding: 0;
font-size: .95em;

}

ul li {
float: left;
margin: 0;
padding: 0;
}
ul li a {
color: #777;
display: block;
text-align: center;
text-decoration: none;
width: auto;
padding: 3px 5px 3px 5px;
border-color: #191970;
border-width: 1px 1px 1px 0;
border-style: solid;
}
ul li.first a {
border-width: 1px;
}

ul li a:hover {
background-color: Fuchsia;
color: Yellow;
}
/* end of Top Menu*/
/* start of side Menu*/
ul#navlist
{
width: 102px;
padding: 0px;
margin: 0px;
border-left: thin solid Black;
font-size: .95em;
float: left;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
}

ul#navlist li a
{
color: #777;
width: 102px;
padding: 2px 8px 2px 8px;
border-color: #191970;
border-width: 0px 1px 1px 0;
border-style: solid;
text-decoration: none;
text-align: left;
}
ul#navlist li.topfirst a {
border-top: 1px solid Black;
}
ul#navlist li a:link { color: Blue;
}
ul#navlist li a:hover
{
border-color: #191970;
color: Red;
background: Yellow;
}
ul#navlist li a:visited {
color: Blue;
}
/* end of side Menu*/
p {
text-align: left;
margin: 0 10px 0 10px;
}
h1 {
font-size: 1.05em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
padding: 0px 0 6px 19px;
border-bottom: 1px dashed navy;
background: url(cube.gif) no-repeat 0 2px;
margin: 0 10px 0 10px;
}
h2 {
font-size: 1em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
margin: 0 10px 0 10px;
}
h3 {
font-size: .9em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
margin: 0 10px 0 10px;
}
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: Red;
text-decoration: none;
}
a:active {
text-decoration: none;
}
/*
....................thumbnail determines how the small photos look
*/
.thumbnail
{
float: left;
width: 83px;
height: 115px;
border: 1px solid #999;
margin: 0px 15px 5px 0;
padding: 5px;
}
/*
.................thumbnailUnitBoard determines how the photos look on Unit Board page
*/
.thumbnailUnitBoard
{
float: left;
width: 220px;
margin: 0px 15px 15px 0;
padding: 5px;
}

Hi All,

Just in the middle of designing a website for my personal hobbies.

I have used alot of CSS to create the layout of the page.

The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!!

In IE it is all over the place, nothing is where it should be.

I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally.

The site in question is my username.

You can access the css stylesheet file by adding /test.css to the end of the domain name.

Any information, or anyone else had problem like this?

All the best for now,

Mike

I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding.
It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at.

Thanks

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" />
<style type="text/css"><!--

html, body {
	margin:0;
	padding:0;
	height:100%;
}

div {
	margin:0;
	padding:0;
}

div#holder {
	margin:auto;
	margin:auto;
	width:800px;
	height:100%;
	background:black;
}

div#links {
	width:auto;
	height:30px;
	background:pink;
}

div#page {
	width:auto;
	height:100%;
	background:white;
	border:2px black solid;
	padding:2px;
}


div#left {
	float:left;
	background:red;
	width:180px;
}

div#right {
	float:right;
	background:blue;
	width:610px;
}

div#footer {
	clear:both;
	width:auto;
	height:30px;
	background:green;
}


--/></style>

</head>
<body>

<div id="holder">
	<div id="links">1</div>
	<div id="page">
		<div id="header">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="divider">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="content">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="footer">1</div>
	</div>
</div>

</body>
</html>

I'm in the process of revamping my website and am trying to use css to position things. I've used browsershots to view what the website looks like in different browsers and platforms. All is well with one exception, IE6! Grrr.

Now I'm a total css newbie so what I'm doing wrong is probably painfully obvious to you guys, but I've been beating my head against this for a while now and would appreciate it if someone could take a look over my shoulder and see if they can spot the problem.

If you use IE6 you'll notice that the featured products are listed below the last 'service ad' image instead of at the top of that 'column' even with the first 'serivce ad' image.

Again, any help in diagnosing/fixing this issue is greatly appreciated!

Here's a link to the page:

http://www.decaldepot.net/zencart/index.php