CSS - Strange Characters..

I have been tearing my hair out trying to figure out what is causing this artifact. I am assuming that it's a rendering issue with IE6, but wanted to ask here to see if anyone can think of what is causing it.

Here is a screenshot:
http://www.chimericdream.com/downloads/indexv_v35_ie6_bug.jpg

And here is the HTML/CSS markup for that part of the page:
HTML
Code:

			<div id="findHelp">
				<h3 id="findHelpHeader">Find the help you need!</h3>
				<form id="findHelpForm" action="" method="post">
					<fieldset>
						<label for="subject">Subject</label><br />
						<select name="subject" id="subject">
							<option value="">Search all subjects</option>
						</select>
					</fieldset>
					<fieldset>
						<label for="grade">Grade</label><br />
						<select name="grade" id="grade">
							<option value="">Search all grades</option>
						</select>
					</fieldset>
					<fieldset>
						<label for="type">Type of help</label><br />
						<select name="type" id="type">
							<option value="">Search all types</option>
						</select>
					</fieldset>
					<fieldset id="last">
						<br /><input type="submit" value="" id="findSubmit" />
					</fieldset>
				</form> <!-- #findHelpForm -->
				<div id="featuredTeachers">
					<h3>Featured Teachers</h3>
					<div class="teacherBox">
						<img src="images/photo_Lisa.jpg" alt="Lisa Yang" /><br />
						Lisa Yang <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Advanced Chemistry Prep</strong><br />
						<small>9th grade - 12th grade</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<div class="teacherBox">
						<img src="images/photo_Drew.jpg" alt="Drew Hamlin" /><br />
						Drew Hamlin <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Proper CSS/HTML Coding</strong><br />
						<small>College</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<div class="teacherBox">
						<img src="images/photo_Joey.jpg" alt="Joey Flynn" /><br />
						Joey Flynn <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Natural Sciences Overview</strong><br />
						<small>6th grade - 8th grade</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<p><a href="#">See more teachers</a></p>
				</div> <!-- #featuredTeachers -->
				<div id="adobePlayer">
					<h4>We've got something better for you.</h4>
					<p>For an interactive search experience, please download Adobe Flash Player.</p>
					<a href="#"><img src="images/browseWidget_btnGetFlash.gif" alt="Get Adobe Flash Player" /></a>
				</div> <!-- #adobePlayer -->
			</div> <!-- #findHelp -->

CSS
Code:

#findHelp {width: 743px; height: 313px; background: #fff url('images/browseWidget_background.png') top left no-repeat; position: relative; margin-bottom: 1em;}
#findHelp #findHelpHeader {position: absolute; top: 15px; left: 25px; font-size: 1.3em;}
#findHelpForm {position: absolute; top: 45px; left: 25px; width: 718px;}
#findHelpForm fieldset {float: left; width: 27%; margin-right: 10px;}
#findHelpForm fieldset label {font-weight: bold;}
#findHelpForm fieldset select {width: 100%; border-width: 1px; border-style: inset;}
#findHelpForm fieldset#last {width: 10%;}
#findSubmit {width: 88px; height: 23px; background: #fff url('images/browseWidget_btnSearch.gif') top left no-repeat;}
#featuredTeachers {position: absolute; bottom: 35px; left: 20px;}
#featuredTeachers p {position: absolute; bottom: -20px; right: 15px; font-size: 90%;}
.teacherBox {width: 175px; float: left; text-align: center;}
#findHelp #adobePlayer {width: 150px; position: absolute; bottom: 30px; right: 20px;}
#findHelp #adobePlayer h4, #findHelp #adobePlayer p {color: #777; margin-bottom: 1em;}
#findHelp #adobePlayer p {font-size: 85%;}

Any help would be greatly appreciated.

I have been designing for a few years now, and never come across this error when I use w3c CSS validation, but when I attempted to validate my CSS for a wordpress theme I've created, I received the following error:
Quote:
Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!"

My CSS is valid, as I keep it really simple, but from a quick Google search, it would seem that w3c CSS validation is attempting to validate my XHTML before my CSS?
Does anyone have any suggestions (aside from pasting the CSS directly into the validation page)?
Here is my CSS:
Code:

body {
background : #003 url(images/bground.png) repeat-x;
color : #fff;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 11px;
margin : 0;
padding : 0;
text-align : center;
}
a {
color : #66f;
text-decoration : none;
}
p {
line-height : 14px;
margin : 0;
padding : 0 0 8px 0;
}
h1 {
background : url(images/h1-logo.png) no-repeat;
color : #300;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 48px;
height : 48px;
margin : 0;
padding : 0 0 0 56px;
}
#index-header {
height : 48px;
margin : 0;
padding : 24px;
text-align : left;
}
#index-header h1 a, #index-header a {
color : #300;
text-decoration : none;
}
.hdr1 {
float : left;
}
.hdr2 {
float : right;
}
.hdr2 ul {
font-size : 12px;
font-weight : bold;
list-style : none;
}
#navigation {
background : url(images/navbar.png) repeat-x;
height : 32px;
}
.nb {
float : left;
}
.nb2 {
float : right;
}
ul#navbar {
height : 16px;
margin : 0 12px;
padding : 0;
}
ul#navbar li {
float : left;
font-size : 13px;
font-weight : bold;
line-height : 16px;
list-style : none;
margin : 0;
padding : 8px;
}
ul#navbar li a {
color : #333;
text-decoration : none;
}
form#searchform {
float : right;
margin : 0;
padding : 6px;
}
form#searchform #s {
background : inherit;
border : 1px solid #333;
}
form#searchform #searchsubmit {
background : inherit;
border : 0;
color : #333;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 13px;
font-weight : bold;
}
#index-wrapper {
border : none;
margin : 0;
padding : 12px;
width : 100%;
vertical-align : top;
}
#slideshow {
background : url(images/Natural-Wonders.gif) no-repeat;
height : 300px;
width : 400px;
}
#recentposts {
padding : 0 0 0 12px;
text-align : justify;
width : auto;
vertical-align : top;
}
.index-post {
background : #306 url(images/post-h2.png) repeat-x;
margin : 0 0 12px 0;
padding : 6px;
}
.index-post h2, .index-post h2 a {
border-bottom : 1px solid #666;
color : #fff;
font-size : 16px;
font-weight : bold;
margin : 0 0 4px 0;
padding : 0;
text-decoration : none;
}
.postmetadata {
border-top : 1px solid #666;
color : #666;
font-size : 10px;
}
.tags {
margin : 0;
padding : 0;
vertical-align : top;
width : 400px;
}
#footer {
border-top : 1px solid #666;
margin : 12px 0;
padding : 12px 0 0 0;
}
#footer a {
color : #999;
text-decoration : none;
}

And just for good measure, here's the portion of the <head> tag that it is referring to:

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 profile="http://gmpg.org/xfn/11">

Hi all,

Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html

It's full of tests, but here's the problem..

The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it...

Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean:
http://www.jaysonsgroup.com/ztest/ntc/zie.gif

The code is simple:
Code:

<div class="fieldname_long">Do you need more than one NTC Card</div>
<div class="fieldvalue">(input field will come here)</div>
<div class='spacer_1px'>&nbsp;</div>
<div class='fieldname_text'>(To share the Modem with friends)?*</div>

The CSS:
Code:

	.spacer_1px {
		clear: both;
		height: 1px;
		overflow:hidden;
		background: blue;
	}
	.fieldvalue {
		float: left;
		background: #ccc;
		display: inline;
		margin: 0;
	}
	.fieldname_long {
		float: left;
		width: 120px;
		line-height: 13px;
		padding-right: 15px;
		color: #B30000;
		font-weight: bold;
		background: #eee;
		display: inline;
		margin: 0;
	}
	.fieldname_text {
		color: #B30000;
		font-weight: bold;
	}

Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE

In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove.

Sorry this is a really small thing but I just can't figure it out! Any ideas?

Many thanks!

Hi. I have noticed a strange behavior with my CSS and I cannot figure out a way to fix it. I have some css to override the body tag style. It sets the font family and size. I need to do this.

However, when I use the font-size in the body, it adds extra pixels to a set of span tags that I use. (see attached picture).

Here is my code. Does anyone know how I can include the font-size in the body, but not have that extra space in my div tags?

Note: the sample image contains images on the edge of the tabs, but their presence has no effect on the issue.

Also, this is for IE 6 on Windows.


Thanks, Dave


Code:

<html> 
<head> 
<style> 


body 
{ 
   font-family: Tahoma,Verdana,Arial,sans-serif; 
   font-size:11px; /* with this line, extra space appears */ 
} 

.tab_off 
{ 
   height:17px; 
   overflow:hidden; 
   cursor:hand; 
} 

.tab_off_text 
{ 
   background:#ACA899; 
   height:15px; 
   font-size:10px; 
   border-top:1px solid #aaaaaa; 
   border-bottom:1px solid #ECECEC; 
   padding-left:4px; 
   padding-right:4px; 
   vertical-align:middle; 
} 

.tabbed_panel 
{ 
   background:#ECE9D8; 
   border-left:1px solid #666666; 
   border-bottom:1px solid #666666;       
   border-right:1px solid #666666; 
   width:400px; 
   height:400px; 
} 
</style> 
</head> 
<body> 
<div id="pnlTabs"> 
   <span class="tab_off"> 
      <span class="tab_off_text">Tab One</span> 
   </span> 
</div> 
<div id="pnlContent" class="tabbed_panel"></div> 


</body> 
</html> 
 

I have a strange css bug in IE 6 and 7 while making a simple two column structure.

In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming.
This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE.

But I want to know is there any other method to fix this issue which uses valid css.

Doctype for the HTML is xHTML transitional

Here is the css code.

#gdsrView{width:456px;}
#gdsrView .srchGrpMod{}
#gdsrView .grpResHdr{}
#gdsrView .grpPagination{}
#gdsrView .srCnt{clear:both;float:none;}
#gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;}
#gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;}
#gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;}
#gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;}
#gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;}
#gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;}
#gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;}
#gdsrView .clearFl{margin-top:1px;}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<head>
<title>IE bug</title>
</head>
<body>
<div id="gdsrView">
<div class="srchGrpMod"></div>
<div class="grpResHdr"></div>
<div class="grpPagination"></div>
<!-- Begin: group results list view -->
<div class="srCnt">
<ul id="lstView">
<li style="background:red;zoom:100%;">
<div class="grpPic">
<img src="../images/pic.jpg" alt="Group Image" width="75" height="75" />
</div>
<div class="grpInfo">
<dl class="grpMLnk">
<dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt>
<dt><a class="actLnk" href="#">Request Invitation</a></dt>
</dl>
<p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p>
<p class="tStamp">Updated 55 Minutes ago</p>
</div>
<div class="clearFl"></div>
</li>
</ul>
</div>
<!-- End: group results list view -->
</div>
</body>

On my test website that i make designs on I am having a very strange problem with the styles of my links.

i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well.

i dont know if it is bug or what, but is begining to give me a headache.

Right now i colored the links pink so that are easy to see.

This happens in both opera and firefox for me.

the url is nverted.net

Hey,

Check out the attachment. (I had to spray paint out the important parts that would highly violate the NDA)

Here is some of the CSS:
Code:

.currentprojects{
   margin-top:10px;
   margin-left:8px;
   width:245px;
}
.currentprojects .proj_heading{
   font-weight:bold;
   padding-left:8px;
   color:#005e9d;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   background-image:url(../images/leftside_midsect_mid.gif);
   font-size:18px;
   padding-bottom:5px;
}
.currentprojects .proj_content{
   padding-left:8px;
   background-image:url(../images/leftside_midsect_mid.gif);
}

.rssfeeds{
   margin-top:10px;
   background-image:url(../images/leftside_midsect_mid.gif);
   margin-left:8px;
   width:245px;
}
.rssfeeds .rss_heading{
   font-weight:bold;
   padding-left:8px;
   color:#005e9d;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:18px;
   padding-bottom:5px;
}
.rssfeeds .rss_content{
   padding-left:8px;
   color:#000000;
}
img{
   margin-bottom:0;
   vertical-align:text-bottom;
}

Now, the projects one is the top. And the rss is the bottom.

Here is the HTML code
Code:

<div class="currentprojects">
                  <img src="images/leftside_midsect_top.gif" />
                  <div class="proj_heading">
                     Heading
                  </div>
                  <img src="images/leftside_midsect_midsplit.gif" />
                  <div class="proj_content">
                     stuff
                  </div>
                  <img src="images/leftside_midsect_bot.gif" />
               </div>
               <div class="rssfeeds">
                  <img src="images/leftside_midsect_top.gif" />
                  <div class="rss_heading">
                     Heading
                  </div>
                  <div class="rss_content">
                     stuff

                  </div>
                  <img src="images/leftside_midsect_bot.gif" />
               </div>

Does anyone have any idea why this is doing that in IE? FF it works fine (like that's really a surprise anymore).

Hi, i have just noticed a very strange cross browser issue. On several of my sites, i have applied simple css styling to my select boxes / drop down menus... some of this styling has been simply changing the color of the text in the drop down menu.

The styling is fine in IE7+, FF (PC), Opera (PC), Chrome (PC), FF (Mac), Safari (Mac), Opera (Mac) BUT NOT ON Chrome (Mac)

I can't understand how you can't apply simple css such as text color to Chrome on a Mac

Has anyone else noticed this or found a solution to this... thanks in advance for your help

Hi,
I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly.
The page can be viewed here.

On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help.

The menu code in the HTML:
Code:

<table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="top"> 
<ul class="topmenuul" id="dmenu">
<li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a>
</li>
<li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a>
</li>
<li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a>
<ul class="submenuul">
<li class="submenuli"><a href="authors.htm">Authors & Artists</a></li>
<li class="submenuli"><a href="families.htm">Families</a></li>
<li class="submenuli"><a href="musicians.htm">Musicians</a></li>
</ul>
</li>
<li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a>
</li>
<li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a>
<ul class="submenuul">
<li class="submenuli"><a href="bio.htm">Bio</a></li>
<li class="submenuli"><a href="press.htm">Press</a></li>
<li class="submenuli"><a href="contact.htm">Contact</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table> 

The CSS for the menu:
Code:

.topmenuul{
	list-style-type:none;
	margin: 0px;
	padding:0px;
}

.topmenuli{
	list-style-type:none;
	float: left;
	margin-left: 10px;
/*	border-left:1px solid #000000; */
/*	border-right:1px solid #000000; */
	padding: 0px;
	color: #000000;
}


.topmenutitle{
	display:block;
	color:#000000; 

}
.topmenuli a:link {
	color: #000000;
	}
.topmenuli a:visited {
	color: #000000;
	}
.topmenuli a:hover{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	text-decoration:none; 
	color:#cccccc; 
	background:#fff;
	width: 120px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding: 0;
	display:none;
	color:#000000;
}

.submenuli a{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	width: 120px;
	text-decoration:none; 
	color:#000000; 
	background:#fff;
	margin-top: 1px;
}

li:hover ul, li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->

#dmenu {
	font-family: Georgia, Helvetica, Sans-Serif;
	font-size:10px;
	text-align:center;
	font-color: #000000;
}

.topmenutitle {
	background:#fff; 
	text-indent:0px;
	text-decoration: none;
	padding:0px;	
	padding-top: 1px;
 	padding-bottom: 1px;
	color:#000000;
	width: 120px;
}

.submenuul {
	background-color:#fff;
	background-position: top left;
}

.submenuli a{
	text-decoration: none;
	color: #000000;
	padding-top: 3px;
 	padding-bottom: 3px;
}
.submenuli a:link{
	color:#000000;
	}
.submenuli a:visited {
	color:#000000;
	}
.submenuli a:hover{
	text-decoration: none;	
	background:#fff;
	color: #cccccc;
	padding-top: 3px;
 	padding-bottom: 3px;
}

now, i'm posting this after i've scoured the forum here and i have yet to find a posted resolution.

The problem i'm having is pushing the footer to the bottom of the page, as opposed to the bottom of the window. The #footer is as follows: Code:

#footer {
	position: absolute;
	bottom: 0px;
	(border/font/background/padding properties)
	width: 310px;
	margin-top: 8px;
	clear: both;
}

you can view the full style sheet here.

if the page has enough information to push past the window height, teh footer remains at the bottom of the window, and is placed on top of the stacking order. The strangest part is that if you scroll, the footer scrolls with the page.

To see what i'm talking about, go to the page and try resizing the window.

I have a DIV on my page with the style 'bottom' applied to it.

It is coloured red so you can see it.

I would like it at the bottom outside of all the other divs/containers.

The DIV with the red background should be at the very bottom of the page, under the large DIV.

This is the HTML placing it on the page:

HTML Code:
Code:

  <!-- InstanceEndEditable --></div>
<div class="bottom">bottom</div>
</body>

You can see it is the last DIV on the page.

Yes I am using Dreamweaver templates.

Here is the CSS for the bottom class:

Code:
Code:

.bottom {
 margin: 0px;
 padding: 0px;
 background-color: red;
 border: 0px solid #999999;
 height: 20px;
 width: 100%;
}

It appres in different places on different pages.

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/

'bottom' DIV almost at the bottom of the page:
http://www.jfwebdesign.co.uk/photog/about.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/work.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/contact.php

Here is a link to the CSS file:
http://www.jfwebdesign.co.uk/photog/styles.css

Can anyone explain why?

Many thanks.

Hi all,

I have the following div definition:

Code:

.adddet {
	position:absolute;
	top:50px;
	width:450px;
	right:5px;
	padding:5px;
	border:1px solid black;
	background:white;
}

in my stylesheet.css and the following block of code in my php script:

Code:

<a name='details'>
<div class='adddet'>
<b>Your details:</b><br><br>
<form name=login action='newcart.php#details' method=post>
E-mail address: <input type=text name=email> 
<input type=submit name=act value='I am a new customer'><br>
I am a returning customer and my password is: <input type=password name=pass> 
<input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small>
</div>

What I want is for the link 'Forgot your password?' to appear next to the 'Go' button at the bottom of the div. This is does if it's just plain text without the anchor tags. As soon as I add the anchor tags (as above) the text leaps to the top of the div in (seemingly) it's own box with a 1px black border around it.

To see a demonstration, have a look at www.pennymead.com/demo.php
Full source for the above page is below:

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>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a name='details'><div class='adddet'>
<b>Your details:</b><br><br>
<form name=login action='#' method=post>
E-mail address: <input type=text name=email> <input type=submit name=act value='I am a new customer'><br>I am a returning customer and my password is: <input type=password name=pass> <input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small>
</div>
</body>
</html>

One final note is that this only seems to happen in Internet Explorer, certainly Google Chrome shows the text in the expected position.

Many thanks in advance for any help you can give with this.

Regards,

vsource.

I've created a stripped down version of the page he

http://www.brovizion.com/testlabaudrey


I want the navbar to work in ie the same way it does in firefox. Here is the 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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Testlab Audrey</title>
	
	
    	<link href="stylesheets/brolayout.css" rel="stylesheet" type="text/css" />
	<link href="stylesheets/brostyle.css" rel="stylesheet" type="text/css" />
	
</head>


<body>

<div id="page">
<div id="outerwrapper">
	
		<div id="header">
			<div id="title">
				<h1>Testlab Audrey</h1>
			</div>
			<div id="title_image">
			</div>
		</div>
		
		
		
		<div id="wrapper">
		
			<div id="navigation">
				<ul id="menu">
					<li class="current_page_item"><a class="first_menu" href="#">link01</a></li>
					<li class="page_item"><a href="#" title="design">link02</a></li>
					<li class="page_item"><a href="#" title="development">link03</a></li>
					<li class="page_item"><a href="#" title="marketing">link04</a></li>
					<li class="page_item"><a href="#" title="hosting">link05</a></li>
					<li class="last_menu"><a class="last_menu" href="#">link06</a></li>
				</ul>
			</div>		
	</div>
		
</div>
</div>

</body>
</html>

Here is the first CSS file (layout):


Code:

* {
	margin: 0;
	padding: 0;
}

#page {
	text-align: center;
	background: url(../images/page_bg.gif) center #7F7F7F repeat-y;
}

#outerwrapper {
	width: 800px;
	margin: 0 auto;
}

#header {
	width: 800px;
	margin-right: auto;
	margin-left: auto !important; /* stupid ie... */
	margin-left: 1px;
	padding: 0;
}

#wrapper {
	width: 780px;
	margin-right: auto;
	margin-left: auto !important; /* stupid ie... */
	margin-left: 1px;
	margin-left: 11px;
	padding: 0px;
	text-align: left;
}

	#navigation {
		margin: 0;
		padding: 0;
		background-color: #FFCC99;
	}

	#content {
		width: 510px;
		margin: 0;
		margin-left: 5px;
		padding: 0;
		float: left;
		background: #FFFFFF;
	}

	#sidebar {
		width: 240px;
		margin: 0;
		margin-right: 5px;
		padding: 0;
		float: right;
		background-color: #FFFFFF;
	}

#footer {
	width: 800px;
	margin-right: auto;
	margin-left: auto !important; /* stupid ie... */
	margin-left: 1px;
	background: url(../images/page_bottom.gif) bottom center transparent no-repeat;
	padding-top: 5px;
	padding-bottom: 15px;
}

Here is the second CSS file (everything else):


Code:

/* Basic Styles
-----------------------------------------------------------------------------*/

body {
	font-size : 90%;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

hr {
	display: none;
	clear: both;
}

h1 {

}

h2 {

}

p {

}

a {
	color: #515151;
	text-decoration: none;
}

a img {
	border: 0 none;
}




/* Advanced Styles (by area)
-----------------------------------------------------------------------------*/

/*------HEADER------*/

#title {
	background: url(../images/header.gif) top #7F7F7F no-repeat;
	height: 76px;
	margin: 0;
	padding-left: 25px;
	clear: both;
	text-align: left;
}

	#title h1 {
		color: #c9e45a;
		padding-top: 25px;
		font-size: 3em;
		letter-spacing: -.1em;
	}

#title_image {
	margin: 0;
	text-align: left;
	display: block;
	height: 95px;
	background: url(../images/header_image6.jpg) center center transparent repeat-y;
}


/*------NAVIGATION------*/

#navigation {
}

#menu {
	list-style-type: none;
	background: url(../images/menu_bg.gif) 50% 0 #515151 repeat-x;
	margin: 0;
	padding: 0;
	height: 80px;
	width: 780px;
	border-top: 1px solid #FFFFFF;
	overflow: hidden;
}

	#menu li {
		background: none;
		padding: 0;
		display: table-row;
		vertical-align: middle;
		float: left;
		height: 80px;
	}

	#menu li.last_menu {
		float: right;
	}

	#menu li a {
		color: #FFFFFF;
		line-height: normal !important;
		line-height: 80px;
		display: table-cell;
		vertical-align: middle;
		height: 80px;
		padding: 0 10px 0 10px;
		background: url(../images/menu_triple_lightblue.gif) top left transparent repeat-x;
	}

		#menu li a:hover, #menu li a:active {
			background-position: center left;
			color: #FFFFFF !important;
		}

	#menu li.current_page_item a {
		background-position: bottom left !important;
		color:#1F3700 !important;
	}

	#menu li a.first_menu {
		padding-left: 35px;
		background-repeat: no-repeat;
		background-image: url(../images/menu_start_triple_lightblue.gif);
	}

	#menu li a.last_menu {
		padding-right: 35px;
		background-repeat: no-repeat;
		background-image: url(../images/menu_end_triple_lightblue.gif);
		background-position: top right;
	}

	#menu li a.last_menu:hover, #menu li a.last_menu:active {
		background-position: center right;
	}

	#menu li.current_page_item a.last_menu {
		background-position: bottom right !important;
	}



/* Basic Lists
-----------------------------------------------------------------------------*/

ul, ol {
	list-style-type: none;
	list-style-position: outside;
	padding: 0;
	margin: .2em 0 .2em 0;
}

ul li, ol li {
	background: transparent url(../images/puce.png) 2px .4em no-repeat;
	padding-left: 15px;
}

ul ul li, ol ol li {
	background: transparent url(../images/bullet.gif) 0px .5em no-repeat;
	padding-left: 8px;
}



/* Advanced Lists
-----------------------------------------------------------------------------*/

#content ol li {
	list-style-type: decimal;
	list-style-position: inside;
	background: transparent;
	padding-left: 0;
}
#content ol li li {
	padding-left: 2em;
}

I'm currently working on the CSS template for a new client and running into a strange issue.

The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation.

For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock.

To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser.

The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin".

You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock

The css file is at http://www.spearsphotography.com/css/style.css

I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad.

Hi, I have an issue with two elements in a container that have a gap between them but I cannot see where the gap is coming from.

Basically, I have a standard centered page layout, the relevant CSS for holding the elements (a banner and then a nav menu underneath) is:

Code:

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#container {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-color:#FFFFFF;
}

And the CSS for the elements is:

Code:

#topbanner {
	width:974px;
}

#menubar {
	width:974px;
	float:left;
}

The banner goes across the top of the page and the idea is that the menubar (which contains a number of images and their rollovers) fits directly underneath without any gap. But there seems to be white space of about 5px in all browsers and I can't see why. I tried adding a clearfloat into the HTML, i.e:

Code:

.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

But this doesn't do anything.

HTML is currently:

Code:

<body>
<div id="container">
<div class="topbanner"><img src="image/banner2.png" alt="banner" /></div>
<div class="clearfloat"></div>
<div class="menubar">(various button images)</div>
<div class="clearfloat"></div>

Any ideas as this has me stumped!