CSS - Weird Border Problem

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

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?

Hi,

I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera.

I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files.

Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine.

For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again.

I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities?

Ps: I am only using geocities for testing.

Regards,
Sim085

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?

Hello.

I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters.
My css:
Code:

p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}

h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}

h3 {
	padding:0px;
	margin:0px;
	color:#006699;
	color:#006699;
}

html,body {
	padding:0px;
	margin:0px;
	background-image:url(main-bg.gif);
    font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	
}

#container { 
	 margin: 0 auto;
	 width: 922px;
}
#header {
	 
	 width: 922px;
	 float: left;
	 height: 130px;
	 margin: 10px 0px 5px 0px;
}
#leftcolumn { 
	 border-left: 1px solid #ccc;
	 border-right: 1px solid #ccc;
	 border-bottom: 1px solid #ccc;
	 background-image:url(col_gradient.jpg);
	 margin: 0px 5px 5px 0px;
	 padding: 10px;
	 height: 900px;
	 width: 195px;
	 float: left;
}

#welcome {
	text-align:center;
	padding:5px;
	background:#EAEAEA;
	color:#006699;
}

#latest_tuts {
color:#006699;
}

#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}

#who_online h3 {
border-bottom:1px dotted #ccc;
}

#search {
	position:absolute;
	margin-top:0px;
	margin-left:0px;
}

#newsletter {
position:absolute;
	margin-top:0px;
	margin-left:0px;
}

#welcome a:link {
	color:#0066CC;
}


#content { 
	 color: #333;
	 margin: 0px 5px 5px 0px;
	 padding: 10px;
	 width: 456px;
	 display: inline;
	 float:left;
	 background-image:url(content_gradient.jpg);
}

#content a:link, a:visited {
	color:#0066CC;
}

#rightcolumn { 
	 color: #333;
	 border-left: 1px solid #ccc;
	 border-right: 1px solid #ccc;
	 border-bottom: 1px solid #ccc;
	 background-image:url(col_gradient.jpg);
	 margin: 0px 0px 5px 0px;
	 padding: 10px;
	 height: 900px;
	 width: 196px;
	 float: left;
}
#footer { 
	 text-align:center;
	 width: 900px;
	 clear: both;
	 color: #878787;
	 border: 1px solid #ccc;
	 margin: 0px 0px 10px 0px;
	 padding: 10px;
	 height:35px;
	 font-size:12px;
	 background-image:url(footer_gradient.jpg);
}


#footer a:link {
	color:#0066CC;
	text-decoration:none;
}

#footer a:visited {
color:#0066CC;
text-decoration:none;
}

#footer a:hover {
	color:#006699;
}


	
#menu3 {
	width: 200px;
	border:1px solid #BCD2E6;
	border-style: solid solid none solid;
	}
	
#menu3 li a {
  	height: 24px;
	text-decoration: none;
	}	
	
#menu3 li a:link, #menu3 li a:visited {
	color: #8BADCF;
	display: block;
	background:  url(menu3.gif);
	padding: 8px 0 0 10px;
	}
	
#menu3 li a:hover {
	color: #627EB7;
	background:  url(menu3.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}
	
#menu3 li {
	list-style:none;
}

	
	#menu3 ul {
	padding-top:0px;
	margin-top:0px;
	padding-left:0px;
	margin-left:0px;
	margin-bottom:0px;
}

#description {
font-size:10px;
color:#006699;
}

Hey guys, I was wondering if you can help me out with something.

On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right?

Can you take a look at help me figure out what I need to fix?

www.illuminatedmind.net

Thanks!

So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet.

UNLESS!

Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect.

What gives?

The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right?

I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets.

Any ideas? I'm just going to use the !important for now, but I really don't like that.

MPEDrummer

The site is question is: http:// w ww.stolen-bikes.org/index4.php


The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css

Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help!

hey, i have a page that includes several flash files..

since its a translation company i have made a page in Russian
but the upper flash menu refuses to appear in firefox but displays
in internet explorer..

other flash files appear..
and i don't know if its related but in order to make
the Russian appear correctly i had to save the php page
as utf-8 with no BOM...

appreciate any help since i am clueless as to this weird problem
here is the page address : bit.ly/4SqdNw

sorry new in the forums could not link it
but copy and pase

Hello,

First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest.

Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs.

http://72.29.74.19/~majdkgf/tangerine/

NOTE: this doesn't happen to the last box

I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested).

URL 1
URL 2

Check out the left-side navigation menus on those two pages.

Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet.

So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu?

Here's the path to the stylesheet:
Stylesheet 1

Hi fowks,

Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped.

Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial.

Thanks for having a look. Hope you can help. It's driving me nuts.

Cheers,
John

Hi, here's the CSS layout:

http://www.abhiram.astahost.com/newlayout4/

The menu layout has been taken from 'Suckerfish menus' in http://www.alistapart.com

The curved borders has been taken from http://www.webreference.com/program..._borders/2.html

I've been trying to make curved borders for the header and the content. It displays it just the way I want it to in Firefox, but for some reason, the content part is giving a big gap in IE. I've used the same code with minor adjustments for both header and the content, but there is a problem only with the content. I've spent 2 hours and am at my wits end. Any leads?

Source:

http://www.abhiram.astahost.com/newlayout4/index.html
http://www.abhiram.astahost.com/newlayout4/mystyle.css
http://www.abhiram.astahost.com/newlayout4/iefix.js

Thanks.

Hi,

I've got weird issue:
I have three div's that are positioned relative below each other. Together they compose a box, where the top has a background, the middle has a background and the bottom has a background. The middle part holds content and can expand vertically so the box is flexible in height. The background tiles vertically so the picture of the border stays intact when it increases in height.

The weird thing is that when a border is not defined for the middle part:

PHP Code:
 border: 0px solid #ffffff; 





that FF gives it a default white border of some 5 pix or so. In IE it works fine.

When I do define a border, the div shows properly, but then I have a border that I don't want (see example white border). I can define the border to be transparent:

PHP Code:
 border: 1px solid transparent; 





but that only works in FF and not in IE (where it shows up black). I can also define the border to be none:

PHP Code:
 border: 1px none #ffffff; 





But that works fine in IE, but in FF I get the 5px white border again....

Here's my css: PHP Code:
.contentbin {
    position: absolute;
    margin: 0px;
    height: 475px;
    width: 780px;
    top: 146px;
    left: 222px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #ff0000;
    z-index: 1;
    }    

.contenttop {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 780px;
    height: 17px;
    border: 0px solid #ff0000;
    background-image:url(../images/contentvensters/contentframe_gr1.jpg);
    background-repeat: no-repeat;
    }    

.contentmid {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px 0px 0px 0px;
    width: 780px;
    border: 1px solid transparent;
    background-image:url(../images/contentvensters/contentframe_midback.jpg);
    background-repeat: repeat-y;
    }    

.contentbottom {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 800px;
    height: 17px;
    background-image:url(../images/contentvensters/contentframe_gr1_onder.jpg);
    background-repeat: no-repeat;
    }    
    
.contentpadder {
    position: relative;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #000000;
    } 




Here's the html: PHP Code:
<div class="contentbin">

    <div class="contenttop">
        <img src="images/spacer.gif">
    </div>
    <div class="contentmid">
        
        <div class="contentpadder">
            Example text
        </div>
        
    </div>
    <div class="contentbottom">
    </div>

</div> 





I've attached screenshots for the different situations.

Any help is greatly appreciated!

Cheers,
Gurt

Well, just imagine. My table displays beautifully in Firefox, but it looks like a third-grader did it in IE7. IE7 will not display a border in connection with cells that have no data. The list is populated from a five-column database and not every field has an entry for every column. In Firefox the bottom border extends across every cell regardless of content. Any ideas?

CSS:
.NewSOL #guardtable td {
vertical-align:top;
border-bottom-style:solid;
border-color:#666666;
border-bottom-width:thin;
}
.NewSOL #guardtable tr {
border-bottom-style:solid;
border-color:#666666;
border-bottom-width:thin;
}

THANK YOU!!