CSS - Css Weird In Safari

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.

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.

Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks!

PHP Code:
<div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');">
  <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div>
  <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div>
</div> 



(images attached)

-Jim

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

Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box.

Anyone see where this is coming from?

Thanks,

Ryan

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!

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?

Hello,

I'm about to go absolutely crazy; I just can't seem to get a grasp on laying out a simple webpage with css. So I have this div container, #main, and in it I want two more div's left and right. I set the margin-top:20px on the left div and that works fine. Then I set the margin-top:20px on the right div and I get a 40px margin-top on the left and 20px margin-top on the right.

The frustrating thing is that dreamweaver displays it the way I want to but chrome, IE, and opera do not.


html4strict Code:
Original - html4strict 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=utf-8" /> <title>Untitled Document</title> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"></div> <div id="nav"> </div> <!-- #main is a wrapper for the page content --> <div id="main"> <div id="maincontent">this is a test </div> <div id="sideright"></div> </div> </div> </body> </html>

  

 <!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=utf-8" />


 <title>Untitled Document</title>


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


 </head>


  


 <body>


  


 <div id="wrapper">


   <div id="banner"></div>


   <div id="nav">


     </div>


   <!-- #main is a wrapper for the page content -->


   <div id="main">


     <div id="maincontent">this is a test </div>


     <div id="sideright"></div>


   </div>


 </div>


  


 </body>


 </html> 

css Code:
Original - css Code @charset "utf-8"; /* CSS Document */ body { background-color:#063; margin: 0; padding: 0; text-align: center; } #wrapper { text-align: left; width: 860px; height: 600px; border: solid #000 3px; background-color:#693; margin-top: 5px; margin-right: auto; margin-left: auto; } #banner { width: 860px; height: 120px; background-image: url(images/banner860120.jpg); } #nav { width: 860px; height: 34px; background-color:#663; } #main { width: 860px; height: 446px; } #maincontent { margin-top: 20px; float: left; margin-left: 20px; background-color:#663; width: 500px; height: 380px; border: 4px double #FFF; color: #FFF; } #sideright { margin-top: 20px; margin-left: 540px; width: 300px; height: 380px; background-color: #663; }

  

  @charset "utf-8";


 /* CSS Document */


  


 body {


     background-color:#063;


     margin: 0;


     padding: 0;


     text-align: center;


 }


  


 #wrapper {


     text-align: left;


     width: 860px;


     height: 600px;


     border: solid #000 3px;


     background-color:#693;


     margin-top: 5px;


     margin-right: auto;


     margin-left: auto;


 }


  


  


 #banner {


     width: 860px;


     height: 120px;


     background-image: url(images/banner860120.jpg);


 }


  


 #nav {


     width: 860px;


     height: 34px;


     background-color:#663;  


 }


  


 #main {


     width: 860px;


     height: 446px;


 }


  


 #maincontent {


     margin-top: 20px;


     float: left;


     margin-left: 20px;


     background-color:#663;


     width: 500px;


     height: 380px;


     border: 4px double #FFF;


     color: #FFF;


 }


  


 #sideright {


     margin-top: 20px;


     margin-left: 540px;


     width: 300px;


     height: 380px;


     background-color: #663;


 } 

I know this code is likely sloppy, but apparently it passed the css validation . I would be very grateful if someone could help me out.

Hey everyone,

I am trying to do a rollover CSS image. Though, with this image it doesn't want to align on the bottom of the table that it will be in. Why is this? I have no clue; so I decided to come here! With the smart people!

Here is the website page that I am trying to do it on:
http://www.automationfoodtech.com/test.html

Here is the desire look (these are the buttons, but client wants to be able to change them himself and without me adding buttons):
http://www.automationfoodtech.com/

Here is the CSS for both (the test page is at the bottom)
http://www.automationfoodtech.com/style.css

Remember we are working on the horizontal navigation.

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!

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?

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

Hello,

On this page

http://www.soulcode.net/webdev/csstest/

I've got the wrapper set at a width of 700px
and then put in some old code with a banner div set at 100%

this made the banner extend another pixel or so... (in both FF and IE) WHY?

(Yep, the solution is to set everything to 100% but I'm trying to get beneath all these properties to fundamental understanding of CSS behavior).

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;
}