CSS - Ie Compatibility Issues (screenshot, Html And Css Included)

I'm working on a site and am getting some margin errors in the header. It all is aligned in Chrome, FF, IE8, Safari on Windows, etc... but IE7 or earlier and Safari on mac is not aligning the margins properly.



the part that is messed up is what is labeled as desc2 in the header section.

It won't left (or even right) align. In the problem browsers, it sends the text off to the center of the header. it would make much more sense if I could show you, but apparently I'm not allowed to post links.

anyone have any suggestions?

Here is the code section i'm working with:

<code>/***** Header ********************/

#header {
margin: 0 auto 0;
padding: 0;
height: 42px;
}

#desc2 {
color: #000000;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
float: right;
margin: 0 290px 10px 0;
}

#header .wrap {
width: 840px;
height: 10px;
margin: 0 auto 0;
}
</code>

quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html?

my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility?

Hi,

I'm wondering if it is possible to override style settings in an external html document. I'm using the <--#include file command to include a html file. I don't want to modify the html file, because people (here at work) are making documents in word9 and save it to html. The major problem is that the <hr> line is too long and so is the text, so it don't fit on our website, at this point these documents are opened in a new window, but it would be nicer to intergrate them into our site.

thanks

-Dan

I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet.

I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks!

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

I have attached an image that encapsulates ideally how I would like the page to look.

I'm having troulbe having left nav, body text lining up.

Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows.

Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped.

View how I would "like" it to look
http://urbaneffect.com/test/layers_image.gif

View Page here
http://urbaneffect.com/test/


CSS FILE
Code:

/* this centers the content*/
#wrapper{
	width: 765px;
	margin-left: auto; 
	margin-right: auto;
	text-align: left;
	position: relative;
	background-color:#FFFFFF;
}

#headerBlock{
	z-index:2;
	position:absolute;
	top:0px;
	margin-left:15px;
}

#bodyBlock{
	position:absolute;
	top:70px;	
}

#leftNav{
	width: 182px;
	float: left;
	height: 300px;
	margin-right: 10px;
	background-color:#666666
}

#innerContent {
	float: left;
	padding-left: 12px;
	padding-top: 20px;
	background-color:#FFCCCC;
	width:550px;
}

Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none...



If everything is square in the top-left corner there is _NO_ problem, everything looks fine.

However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place?

Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer?

I swear I've done some searching on this but I haven't been able to find a satisfactory answer.

I have a style sheet in the root of my site with this declairation in it:
Code:

#nav
{
	float: left; 
	width: 190px; 
	height: 600px; 
	min-height: 600px; 
	margin-right: 10px; 
	background-image: url(images/gradientBg.jpg); 
	background-repeat: repeat-x;
}

The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this:
Code:

/root
  styles.css
  index.php

/includes
  nav.php

/images
  gradientBg.jpg

The stylesheet is being included like this
Code:

<link rel="stylesheet" type="text/css" href="/styles.css" />

Now for my problem...

The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all.

I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point.

Thanks for staying with me this far and for any advice.

This problem has been driving me crazy. Long story short, this is what it looks like in Firefox 3. This is the correct way it should look. (ff.jpg)

This is the way it looks in both IEs (ie.jpg)

The entire third <li> item wraps correctly in firefox, but in ie, the word within the <li> wrap, but not the entire <li> element.

Here is the html:
Code:

<ul class="tabNavSecondary">
<li><a href="#preventionSub1">Prevention</a>|</li>
<li><a href="#preventionSub2">xxxxxx</a>|</li>
<li><a href="#preventionSub3">xxxxx</a>|</li>
<li><a href="#preventionSub4">xxxx</a>|</li>
<li><a href="#preventionSub5">xxxx</a>|</li>
<li><a href="#preventionSub6">xxx</a></li>
</ul>

CSS:
Code:

.tabNavSecondary{
	float:left;
	margin:6px 0 15px -5px;
}
.tabNavSecondary li{
	background:none;
	display:block;
	float:left;
	margin:0;
	padding:0;
}

.tabNavSecondary li a,
.tabNavSecondary li a:link{
	float:left;
	margin:0 5px;
	color:#003399;
}

Any thoughts? I've tried for about an hour with all sorts of different styles.

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on?

A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites?

Is css the best way to design an html site now a days?

Sorry im a newbie in this, Im going to start learning soon. Thanks !!!

I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value".

However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag?

I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible.

Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css">



</head><body>
<div id="header"><a href="index.html">&nbsp;Deminyx</a></div>
<div id="side">
<table>
<tbody>
<tr>
<td><a href="service.html">The Service</a></td>
</tr>
<tr>
<td><a href="cost.html">The Cost</a></td>
</tr>
<tr>
<td><a href="ease.html">The Ease</a></td>
</tr>
</tbody>
</table>
</div>
<div id="content">This is my content, I wont waste your time.</div>
</body></html>

and the CSS

Code:

body {
background-color:#666;
}

#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}

a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}

a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}

table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}

#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}

I do a lot of we development work for an intranet site. All users are on IE. Occasionally, I'll develop a page that looks fine in my browser (IE 8.0.6001) but not in others (8.0.7600). I have to set mine to compatibility mode to see what others see.

I thought the compatibility mode was meant to display a web page the way it would in an older browser.

Is it possible that I have something installed on my machine that makes my browser render pages differently? I know this is vague, but I am just wondering if anyone has ideas on where to look.

http://warcraftpress.com/index.php

(If it displays a whitepage, revisit the link again)

Working on browser compatibility, and well, IE is a stubborn one, yes? For some reason, it places post areas below the right menu, as well as some spacing issues. I've checked in FireFox 3 (which I designed in), Safari, and Opera, but only IE does this issue. (IE7, I mean. I no longer care to support IE6)

One other thing I see is the menu items's arrow graphic cuts off in other browsers, I'd say it has to do with the height and other specifications in the CSS, but I do make a mess to try and make something work :P The big arrow graphic (the normal) is at a height of 22, while the small (sub menu) one is 18. Both are in pixel measurements.

Thanks a lot in advance for the help! You can find the stylesheet he

http://warcraftpress.com/wp-content/themes/default/style.css