CSS - Css Goes Crazy On Browser When Zoomed In -- Please Advise

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.

Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example:

normal view:

nav | content
nav | content
nav | content
footer--------

problem in ie 5.01

Code:

      | content
      | content
      | blank
      | blank
nav | blank
nav | blank
nav | blank
      | blank
      | blank
      | blank
      | blank
footer--------

Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well

Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE?

You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly

Site

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 click here to read my message.

My code:
Code:

#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}

#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}

Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes?

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

After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up.

The site is http://www.orchard-homes.co.uk/, has anyone got any ideas?

It seems like its been stretched vertically...

Thanks!

I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE.

<a href="(URL address blocked: See forum rules)">Link</a>

I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers.

Any guidance is very appreciated. thanks.

My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out.

That being said

I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes

(I know I can post my url here, how can I redirect you guys to veiw my site??)


/********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/
Quote:
/* general */
body {background: url((MyBGJPEGforbackground)); margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
a, a:link, a:visited {color:white; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:black; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:30px;}
.mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:1px auto; width:750px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;}
.reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;}

Hi guys

Can anyone see why the following has a space under the nav in IE but not in Opera or FF?

http://www.mitya.co.uk/cssproblem

(CSS: http://www.mitya.co.uk/cssproblem/css/main.css )

I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc.

I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK.

Thanks in advance

How is it that safari is toooooo stupid to recognize the fact that I've specified background images... it also doesn't recognize the display:inline attribute. Are these just things that are unsupported in safari? I can't for the life of me figure out why it's doing this.

Code:

#tabs ul {
	padding-left: 0;
	margin:0px;
	display: inline;.
	} 
#tabs ul li{
  	width:170px;
  	height:25px;
	list-style: none;
	display: inline;
  	text-decoration:none;
  	z-index:1;
	} 	
#tabs ul li a{
  	height:25px;
	background-image: url("../images/mainTab.jpg");
  	background-repeat: repeat-x;
  	display: inline;
  	font-size: 10pt;
	color:#fff;
  	text-decoration:none;
	}
#tabs ul li a.selected{
	background-image: url("../images/mainTabSelected.jpg");
  	background-repeat: repeat-x;
  	color:#000;
	}

Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it

/* Style for Entries in Category View (Cards View) */
/* -------------------------------------------------------- */
table.sobi2Listing {
}
table.sobi2Listing td {
vertical-align: top;
float: left;
height: 1%;
width: 97%;
}

/* new */
div.vcard_item {
margin: 1px 0px 2px 0;
padding: 6px;
width: 97%;
border:1px solid #dddddd;
background-color:#fbfaf2;
-moz-border-radius: 5px;

The actual page is findawebsitedesigner.info/directory-2.html
If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help.

Hi Guys,

The following code works fine in FF but in IE(tested in IE7) it shows gap/space between first and second row. I've attached the screenshots of two browser.

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=iso-8859-1" />
<title>Testing</title>
</head>
<style type="text/css">
.box{float:left;}
.spacer{
	clear: both;
}
</style>
<body>
<div class="box"> <img src="http://www.webdesignerforum.co.uk/uploads/av-51.jpg" alt=""/> </div>
<div class="box"> <img src="http://www.webdesignerforum.co.uk/uploads/av-51.jpg" alt=""/> </div>
<div class="spacer"></div>
<div class="box" style="clear:right"> <img src="http://www.webdesignerforum.co.uk/uploads/av-51.jpg" alt=""/> </div>
<div class="box"> <img src="http://www.webdesignerforum.co.uk/uploads/av-51.jpg" alt=""/> </div>
</body>
</html>

Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates.

I'm trying to convert a horrendous table layout into CSS.

What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo.

I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing.

This is my current code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
	
<style type="text/css">	
	body {margin: 0px; padding: 0; background-color:#ffffff;}		
	#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
	#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }		
</style>
	
</head>

<body>

<div id="header">
	<div style="width: 425px; float: left;">
		<img src="logo.jpg" width="220" height="66" alt="logo">	
	</div>
	<div style="float: right;">
		<p>This is annoying</p>	
	</div>
</div>
<div id="nav">
</div>

</body>
</html>