CSS - Ie Won't Render But Others Will Fine, Im Going Crazy

Hi Guys,

we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect.

Link 1
Link 2 (forum)
Screenshot

Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens.

I think problem is somewhere in CSS file.

Link to CSS file

Where could be the problem?

p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads.

I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks

I am sooooo annoyed with this!

I have designed all of my pages with the same template however 2 of my pages seem to be roughly 10 pixels wider even though they all have a width of 940 pixels.

www . toolboxstrategies . com/test/brauer

Pages: Home, Communities & The Brauer Way are perfect but pages Our Region and Contact seem to be slightly wider than the rest..

How can that be when my header, body and footer all have a width of 940px?

Tried to fix this for HOURS but I can't figure out what is causing it!

Thank you!!!!!!

http://dailyblogdose.com Above the image there is a bunch of links to the different pages, well on Firefox when you hover on them, there is a border-bottom underline. On IE7 however it disappears.

I could get them back by adding display:block; to #pages ul li a:hover however it makes them look slightly elevated. Any other ways?

Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it.

I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is:

frontlinescreative.com/aljc2/indexCSS.html

In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser.

My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right.

Any ideas on where I've gone wrong?

Hi folks

Hoping a CSS expert out there might be able to assist.

I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768.

The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator.

In Opera, it is fine at 800x600, but does not render properly at 1024x768

Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari.

I am guessing it is something to do with #text ? Do I need to clear: or something like that?

If you can help, I would be grateful.

Thanks in advance
Sol

www. waihekemagicmassage.com
And: /magic.css

I have a dev server Fedora 7 LAMP setup. I have a simple css tag for font size 1.2em. It looks fine. When I push it up to production (unknown server) at GO Daddy the font is HUGE.

I am sure the code is the same. If I view it in Firebug all looks well.

There are also a couple of other strange things like margins being off a couple of pixels here and there.

My question is do different versions of Linux or maybe Apache cause CSS to render differently?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="background-color: red;"><input type="radio" id="radio"></div>
</body>
</html>

Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides.

Are there any tricks to getting consistency?

Resolved!

I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all!

Here is my website:

http://panik.owphosting.com/home.php

And here is my css:

Code:

body {
	margin: 0px;
	color: #000;
	font-size: 8pt;
	font-family: verdana;
	height: 100%;
	width: 100%;
	background: url("images/bg2.jpg");
}
a {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:visited {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:hover {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
} 
h1 {
	font-family: verdana;
	color: #000;
	font-weight: bold;
	font-size: 24pt;
}
#header {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	background: #FBF2D9;
	width: 700px;
	margin: 0;
}
#main {
	position: relative;
	width: 700px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	height: 700px;
	background: #FBF2D9;
}
#leftcontent {
	position: absolute;
	padding-top: 10px;
	padding-left: 2px;
	padding-right: 2px;
	border-left: 2px solid #000;
	left: -2px;
	background: #FBF2D9;
	width: 150px;
}
#rightcontent {
	position: absolute;
	padding-top: 10px;
	padding-right: 2px;
	padding-left: 2px;
	border-right: 2px solid #000;
	right: -2px;
	background: #FBF2D9;
	width: 150px;
}
#centercontent {
	position: absolute;
	left: 154px;
	padding: 10px;
	background: #FBF2D9;
	width: 375px;
	text-align: left;
}
#moduletop {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	background: #26476C;
}
#modulebottom {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	text-align: left;
	font-size: 8pt;
	border: 1px solid #000;
	border-top: 0px;
	background: #4184B4;
	background-image: url("images/modulefill.jpg");
	background-position: 0% 100%;
	background-repeat: repeat-x;
	overflow: auto;
}
#modulebottom a {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:visited {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:hover {
	color: #99D8FE;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
table#news {
	color: #000;
	font-size: 10pt;
	font-weight: bold;
	width: 375px;
	margin: 0;
	border: 0;
	vertical-align: top; 
}
table#news div.head{
	color: #237CBB;
	font-size: 10pt;
	width: 375px;
	font-weight: bold; 
}
table#news div.date{
	color: #919191;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.detail{
	color: #000;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.foot{
	color: #000000;
	font-size: 10pt;
	font-weight: bold;
	margin: 0;
	width: 375px; 
}
shout{
	width: 130px;
	overflow: auto;
}

I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers.

Look at my site: http://www.firstinsurancefunding.net/

It displays differently in EVERY different browser.

WHAT'S THE FIX??

(sorry, I'm frustrated. Could really use some pointers).

Hi -

I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain.

The website works fine in Firefox and Safari, and almost all the pages work fine in IE.

The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari.

It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP.

The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place.

If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code.

It would be greatly appreciated if you could let me know if you would like to help me out.

I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all.

Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member.

I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it??


Click Here for My Website

CSS code -

Code:

body {
	background-color:#0071E1;
	background-image: url(images/head.png);
	background-repeat: repeat;
	margin-top: 25;
	margin-bottom: 25;
	margin-right: 0px;
	margin-left: 0px;
}

/* LAYOUT */

#catbg {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg1 {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 20px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	width: 98%;
}
#catbg2 {
	color: #009900;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 45px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg3 {
	color: #990000;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg4 {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 45px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
/* Surrounding div */

#wrap {
	width: 961px;
	margin: 0 auto;
	padding: 0;
	top: auto;
}

/* Surrounding the nav and main content */
#wrapper {
	width:925px;
	align:center;
	background-color:#FFFFFF;
	background-image: url(images/newbkZ2.png);
	background-repeat: repeat;
	vertical-align: top;
	border-top: #005FAC;
	border-right: thin inset #005FAC;
	border-bottom: #005FAC;
	border-left: thin outset #005FAC;
	height: auto;
	padding: 0px;
	margin: 0 auto;
}

/* Header surround */
#shad-l {
	 padding-left: 18px;
	 background: url(images/shadow-l.png) 0 0 no-repeat;
}

#shad-r {
	 padding-right: 18px;
	 background: url(images/shadow-r.png) 100% 0 no-repeat;
}

#header{
	position:relative;
	height:215px;
	overflow:hidden;
	background: #FFFFFF url(images/newbkZ2.png) repeat;
	top: auto;
	width: 925px;
	margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
	display: block;
	width: 900px;
	height: 215px;
	cursor: pointer;
	padding-left: 30px;
	padding-top: 10px;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	position: relative;
	background-position: center;
	top: auto;
	padding-right: 0px;
	padding-bottom: 0px;
}



/* Navbar */

#nav {
	margin: 0 auto;
	width:925px;
	height:38px;
	font-family:Arial;
	font-size:14px;
	color:#ffffff;
	background-image: url(images/navbg3.jpg);
	background-repeat: repeat;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: inset;
	border-left-style: outset;
	border-right-color: #005FAC;
	border-left-color: #005FAC;
	line-height: 1.8em;
	font-weight: bold;
}

#navlist li
{
	display: inline;
	background-repeat: no-repeat;
	padding-left: 10px;
}

#navlist a
{
	font-weight: bold;
	text-transform: none;
	text-decoration: none;
	font-size: 16px;
	line-height:38px;
}

#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}

#navlist a:hover
{
	color: #FFFF00;
	background-repeat: no-repeat;
	background-position: 0;
	background-image:  url(images/green.png);
	padding-left: 25px;
} 



/* Main content Area */

#box1 {
	margin:10px;
	text-align:left;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px;
	font-weight: bold;
	float: left;
	clear: left;
}

#box2 {
	text-align:left;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px 30px 10px 20px;
	font-weight: bold;
	height: auto;
	float: left;
	clear: left;
}

#box3 {
	text-align:center;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px 30px 10px 20px;
	font-weight: bold;
	height: auto;
	float: left;
	clear: left;
}

/* Height Gap */

.hg {
	margin:0 auto;
	height:5px;
}



#footer{
	background: url(images/footer-bg.png) repeat-x 100%;
	text-align:center;
	margin: 0 auto;
	font-size:12px;
	font-family:Tahoma;
	color:#FFFFFF;
	position: relative;
	height: 130px;
	width: 925px;
	font-weight: bold;
	line-height: 1.2em;
}

/* LINK STYLES */

/* Linkpage links */

a.weblink {
	font-family:Arial;
	font-size:16px;
	text-decoration:none;
	color:#0066CC;
	font-weight: bold;
}

a.weblink:hover {
	font-family:Arial;
	font-size:16px;
	text-decoration:underline overline;
	color:#990000;
	font-weight: bold;
}

/* Footer links */

a.footerlink {
	font-family:Tahoma;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}

a.footerlink:hover {
	font-family:Tahoma;
	font-size:11px;
	color:#FFFF00;
	text-decoration:none;
}

/* All other links */

a {
	font-family:Tahoma;
	font-size:11px;
	color:#0066CC;
	text-decoration:none;
}
a:hover {
	text-decoration:overline;
	color: #990000;

}	
#left {
	float: left;
	margin: 0;
	padding: 20px 20px 0 30px;
	width: 300px;
}

#right {
	float: right;
	margin: 0;
	padding: 20px 30px 20px 20px;
	width: 400px;
}
/* No image should have a border when linked */

.a img {
	 border: 0;
}

#bodyarea {
	padding: 10px;
	margin: 0;
	background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
	font-family: Tahoma;
	font-size: 9px;
	color: #0066CC;
	font-weight: bold;
	text-align: right;
}

/* text classes */

.smalltext {
	 font-size: 10px;
	 font-family: verdana, sans-serif;
}

.middletext {
	 line-height: 14px;
}

.normaltext {
	 font-size: 12px;
}

.largetext {
	 font-size: 16px;
}

/* lightbox */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #0066CC;
	background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}

Please help me CSS gods. I want pure CSS Menus.

I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me.

URL Blocked
Works fine on FF and IE6. IE7 users complain.

URL Blocked
Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus.

I also can't get it centered or the title evenly spaced on any browser.


At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages.

The CSS is main.css in the respective folders.


Ohh well, the forum won't let me give links to my samples.

Hi,
I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment.
I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home
And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height.
Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me.
Any help would be greatly appreciated.
Thanks,
Steph