CSS - Weird! Weird! Weird!

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.

I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine.

here be the code:
Code:

.mainBody {
	color: #000;
	font-family: helvetica, arial, "sans serif";
	font-size: 12px;
	text-align: justify;
	padding-left: 35px;
	padding-right: 35px;
}

.mainBody:link, .mainBody:visited {
	color: #600;
	text-decoration: underline;
}

.mainBody:active, .mainBody:hover {
	color: #996600;
	text-decoration: none;
}

.pageLinks {
	color: black;
	font-family: helvetica, arial;
	font-size: 14px;
	text-align: center;
}

.pageLinks:link, .pageLinks:visited {
	color: #960;
	text-decoration: underline;
	font-size: 14px;
}

.pageLinks:active, .pageLinks:hover {
	color: #960;
	text-decoration: none;
	font-size: 14px;
}

So I have the following website: http://www.itmustbecollege.com/

and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size.

I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space!

Hello,
I have a free text search with auto suggestion that opens below the input box.
I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump.
You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list.

What can I do to fix this?

Thanks

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE:

Code:

#content {
	position: relative;
	margin-left: auto;
	margin-right: auto; 
	padding-right: 25px;
	padding-left: 25px;
	font-family: Verdana,Arial,helvetica, sans-serif;
	font-size: 11px;
	text-align: justify;
	overflow: auto;
	width: 543px;
	height: 225px;
	background-image: url(img/centerblank.jpg);
	background-repeat: no-repeat;
	_background-attachment: fixed;
	}

FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas?

I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things.

Example One:

The header of the search box is stretching to the right, when the googleads box is floated right.

Eample Two:

The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers.

These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks!

Site

CSS

All I am trying to do is pad some text so that it is aligned vertically, but whenever I pad the text, in Firefox, it forces the parent div up, instead of the text down, which makes no sense
Code:

body 		{ margin: 0px;
			  font-family: Verdana, Arial, Helvetica, sans-serif }
#logoimage	{ margin: 5px 0px 2px 5px }
#version	{ font-size: 10px;
			  font-weight: bold;
			  margin: 4px 5px;
			  text-align: center;
			  position: absolute;
			  top: 20px;
			  right: 15px }
#header		{ background-color: #D2E1FA;
			  height: 20px;
			  position: relative }
#navigation	{ font-size: 11px;
			  position: absolute;
			  top: 2px;
			  left: 20px }
#userinfo	{ background-color: #FFFFFF;
			  height: 13px;
			  width: 150px;
			  color: #000000;
			  font-size: 10px;
			  margin: 4px 5px;
			  text-align: center;
			  position: absolute;
			  top: 0px;
			  right: 150px }

Actual html is here...

Code:

		<img id="logoimage" src="/images/logosmall.gif">
		<div id="version">
			Beta Build 1000
		</div>
		<div id="header">
			<div id="navigation">
				Test&nbsp;&nbsp;&nbsp;
				My Account
			</div>
			<div id="userinfo">
				<b>Guest User</b> > Log In
			</div>
		</div>

It actually pushes the div almost until it overlaps the image above, which makes no sense...

How should I be applying the padding instead?

thanks in advance!

hey all,
i'm having a really strange issue with firefox users on windows. basically, my site is simple. i've got navigation on the left, and a content table on the right. it's all done with CSS.

firefox users on windows have been complaining that sometimes (not all the time) the content window has been loading half way. it's beendoing this on numerous PCs with firefox, and i can't figure it out. sometimes it loads the whole content box, sometimes it stops half way.
it's fine all the time in IE on both platforms, and firefox on a mac.

here is the code i'm using for the content boxes:

#content_table { FONT-FAMILY: Verdana, Helvetica; width: 60%; margin: 0 auto; border: 1px solid #999; overflow: hidden; }

#content_table h2 { FONT-FAMILY: Verdana, Helvetica; margin: 0; -moz-opacity: 1; font-size: 15px; text-align: left; padding: 2px 0 2px 15px; font-weight: bold; background: #000 url(../../../../images2/title.png) repeat-x; color: #fff; border: 1px solid #000 }

#content_table p { font-size: 12px; FONT-FAMILY: Verdana, Helvetica; -moz-opacity: 1; padding: 5px; background: #333333; color: #FFF; margin: 1px }

if you're on a PC, check it out:

link

thanks!

Hi guys,

I'm at the end of my rope about this.

I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems.

I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it:

http://www.teamsnowvalley.com/home.php

(still a work in progress. just sayin)

the css behind the column:

#content .left {
float:left;
padding-right:9px;
background:yellow;
width:179px;
voice-family: "\"}\"";
voice-family:inherit
}

html>body #content .left { width: 179px; }

Can anyone tell what i'm doing wrong?

Many thanks,

M

I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance.

http://www.manliusvillage.org/test/index.html

The related CSS is below:

Code:

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}

#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #sublinks a {width:1%;}

#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}

Hey guys,
First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page.

I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page.

Here's my css:
Code:

/* basic elements */
body { 
	font: 8pt/16pt georgia; 
	color: #000000; 
	background: #AEAEAE url(images/butterflybg.gif) no-repeat top center; 
	}
p { 
	font: 8pt/16pt georgia; 
	margin-top: 0px; 
	text-align: justify;
	}
h1 { 
	font: italic bold 14pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
h2 { 
	font: normal bold 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
h3 { 
	font: normal 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #FFFFFF;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #9685BA;
	}

/* divs */
#header {
	background: url(images/2006_Header.png) no-repeat;
	width: 697px;
	height: 127px;
	padding: 0px;  
	margin: 0px auto;
	}
	
#page {
	width: 697px;
	background: url(images/2006_WideExt.png) repeat-y center; 
	margin: 0px auto; 
	padding: 0px;
	}

#nav {
	background: url(images/2006_LNav.png) no-repeat left;
	padding: 0px;
	margin: 0px;
	width: 175px;
	height: 306px;
	float: left;
	}

#content { 
	background: none transparent;
	margin-top: 0px;
	}
	
#text {
	}

#footer { 
	text-align: center; 
	}

And my html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

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

<body>

<div id="header">
	</div>
<div id="page">
	<div id="nav">
	</div>
	<div id="content">
		<div id="text">
			<p>put text here</p>
			
		</div>
		<div id="footer">
			<a href="http://devshed.com" title="Forums">xhtml</a> &nbsp; 
		</div>
	</div>
</div>


</body>
</html>

Am I overlooking something simple?

If you see on http://promogift.be/index.php?page=producten
the first 4 products are like it must be, but from 5 and more it makes a different jump, i don't get it why, IE show it good...

I searching for 2 days now and don't get it, anyone a solution?

Well this is VERY weird. I don't even know what to do about this one. Take a look at this site in IE...

FIXED

Now notice the footer at the bottom. For me every couple times I refresh it the whole page goes out of whack... and then a couple refreshes later it seems ok again. I can't honestly figure out what is going on here.