CSS - Hidden Text Problem On Ie

My text is going behind a image in ie but not firefox its the number at the top right.

site here

Code:

/* CSS Document */

html {
	background: url(../images/bg.gif);
	background-repeat:repeat-x;
}

body {
	padding: 0;
	margin: 0;
	font-family: Myraid Pro, Arial , serif;
}

#wrapper{
	width: 977px;
	margin: 0 auto;
}

#headertop {
	background: url(../images/top.png) no-repeat;
	width: 977px;
	height:41px;
	margin-top: 30px;
	
}

#headertop p {
	float:right;
	margin: 30px 30px 0 0;
	font-family: Myraid Pro, Arial , serif;
	font-size:20px;
	color: #9a151c
}

#header {
	background: #fff;
	margin: 0 0 0 9px;
	width: 960px;
	height:101px;
	
}

#logo {
	background: url(../images/logo.jpg);
	width: 314px;
	height: 77px;
	margin-left: 40px;
}

#nav {

	float: right;
	margin:  -40px 20px 0 0;
}

#nav ul {
	list-stlye-type:none;
}

#nav li {
	display: inline;
	margin: 0 2px 0 9px;
	color: #000;
}

#nav a {
	text-decoration: none;
	color: #000;
}

#banner {
	background: #fff url(../images/banner1.jpg) no-repeat 25px 25px;;
	width: 911px;
	height: 297px;
	padding: 0 49px 0 0;
	margin: 0 0 0 9px;
}

I have a really wierd problem.
I want to work with div's inside div's, so i will be able to make content scrollable.
But i have this problem.
(It is really hard to explain this without showing screenshots so i try to bend the forum-rules a bit )

scalesmusic DOT dk SLASH problem DOT jpg

As you can see, theres an empty line before my headline. The stylesheet for this page is as follows.

body { background-color: black;
background-image: none);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
margin: 10px;
scrollbar-3dlight-color: #ff6600;
scrollbar-base-color: black;}
div { -moz-border-radius: 9px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #222222;}
div div{-moz-border-radius: 4px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #222222;}
p { font-family:courier new;
font-size:14;
color: white;
text-indent: 10px;}
a { font-family:courier new;
font-size:16;
color: #ff6600;
text-decoration: none;}
a:hover{font-family:courier new;
font-size:16;
color: #ff6600;
text-decoration: underline;}
h1 { font-family:courier new;
font-size:32;
color: #ff6600;}
h2 { font-family:courier new;
font-size:18;
color: #ff6600;}
h3 { font-family:courier new;
font-size:16;
color: white;}
h4 { font-family:courier new;
font-size:10;
color: white;
text-decoration: underline;}
img { hspace:20;
border-color: #ff6600;}
.boxVisible {display: block;}
.boxHidden {display: none;}

I've made a testpage too, to locate the problem.

scalesmusic DOT dk SLASH tester DOT jpg

Here's no problems!?!
The stylesheet looks as follows:

div { -moz-border-radius: 9px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: blue;
background-color: white;}

div div { -moz-border-radius: 9px;
padding: 5px;
padding-top: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
background-color: #666666;}

div div div{ -moz-border-radius: 9px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: red;
background-color: #888888;}
p { font-family:courier new;
font-size:14;}
h { font-family:courier new;
font-size:24;}

Why this empty line?!? I have no idea what i am doing wrong!

PS: I really don't like to bend the forum-rules, but i can't explain this problem in words alone!

I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue.

For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me.

Thanks!

Here's my HTML:
Code:

<center>
<div id="hpMaincanvas">

<? include('includes/topnav.php'); ?>

<div id="aboutArea">
<h2>About VERVANO</h2>

VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections 
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>

This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and 
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this 
process has been met with rigorous research and challenging sourcing.<P>

Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are 
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>

It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>


<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>

<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.  
She went on to manage and design large scale, multi-million dollar interior design 
and architecture projects for the United States Air Force Academy.  She later 
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree 
in Architecture with emphasis in Sustainable Design.  Through her architectural 
background she developed a contextual understanding of buildings as integrated 
systems. Following her graduation from the University of Texas she subsequently 
worked in complex hospitality design and architecture in Austin, TX, giving her a 
unique and real-world perspective regarding many attributes of public space design. <P>
 
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention 
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates 
architectural and interior design solutions to create on budget, on time, functional environments.  <P>
 
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user.  Laura Britt Design firm is 
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff.  <P>
 

<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally 
trained to identify the key factors driving the architecture and design and construction of each building 
project with the facilities team and architecture team. 
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site 
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and 
rendering. <P>

<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned 
Business.  HUB certification was granted in November or 2008.  The firm is also listed on the states Central 
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>

Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time, 
on-budget projects through continuing business education and the sharing of best practices.<P>

</div>


<? include('includes/footer.php'); ?>
</center>

Here's my CSS:
Code:

body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   color: #645133;
   background: url(art/bg.jpg);    
   background-repeat: no-repeat;
   background-position: center top;
}
 
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 30px;
   font-weight: lighter;
   color: #49320f;
}
 
h2 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color: #49320f;
   margin-top: -20px;
   font-weight: lighter;
   line-height: 36px;
}

#hpMaincanvas {
   position: relative;
   padding: 0px;
   width: 900px;
   margin-top: 35px; 
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff; 
   z-index:5;
}


#socialMedia {
   position: relative;
   font-family: georgia,palatino,serif;
   font-size: 12px;
   color: #bbb38c;
   line-height: 17px;
   font-style: italic;
   padding-right: 50px;
   width: 900px;
   text-align: right;
}


#MainArea {
   position: relative;
   padding-right: 50px;
   padding-top:0px;
   width: 900px;
   text-align: center;
   z-index:20;
}

#AboutArea {
   position: relative;
   padding-right: 50px;
   padding-left: 50px;
   padding-top:30px;
   width: 800px;
   z-index:20;
   text-align:left;
}

#footer {
   position: relative;
   text-align: center;
}


#navigation {
   position: absolute;
   top:40px;
   width: 600px;
  left: 320px;
   font-weight: normal;
	z-index:25;
	margin-left: auto ;
  margin-right: auto ;

}


li {
   list-style: none;
   float: left;
   position:relative;
}


ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  }

ul li {
  display: block;
  position: relative;
  float: left;

}
  
li ul {
  display: none;
  border: 1px solid #e2ddbe;
  }


ul li a {
  display: block;
  text-decoration: none;
  text-align:left;
  color: #594425;
  padding: 7px 7px 7px 7px;
  white-space: nowrap;
  
}
ul li a:hover { 
color: #d93800;
 }
 
li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
  background: #efede1;;
}

li:hover a { 
 
}


li:hover li a:hover 
{ background: #ffffff; }

.logo {
	position: absolute;
	top: 30px;
	left: 50px;
}

.label {
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 11px;
  	text-transform: uppercase;
	line-height: 19px;
	letter-spacing: 2pt;
	color: #a99573;
}

.copyright {
	font-family:georgia,times,serif;
	font-size:11px;
	color:#beb692;
	text-align:center;
}

a.copyright, a.copyright:link, a.copyright:visited {
	text-decoration:none;
	font-family: georgia,times,serif;
	font-size: 11px;
	text-align:center;
}

a.copyright:hover {
	text-decoration:underline;
}

.middle, .submit {
	vertical-align: middle
}

Hi Im a newbie to this site and to web page building so Im no sure if this is the right spot to be posting, but I think my problems are css related.

Ive designed my web page with a 3 column layout the when I insert text into the left and middle columns the text starts from the top of the page like its ment to, but for some reason when I insert text into the right column it starts from the bottom of the page instead and I cannot work out why? Does anyone have any ideas? Is it css related or html?

2nd Issue how do I get the menu bar to float to the centre of the screen instead of the left? Ive tried so many things and it just make it worse.

I know its hard without pics.

The DIV is set to 100% height...

http://www.webpagedesignrus.co.uk/DECS/services.php

Can you please tell me how to fix this? The site has to be done in 30 minutes...

Please help,

Thanks.

So Im having this problem where when the user inserts a word with more than 15 chars with no spaces, that word will come out of my Code:

.product_wrap .title {width:120px;}

Div.

Code:

<style type="text/css">
body {background:#CCC;
	  padding:5px 5px 0px 5px;
	  margin:10px 5% 0px 5%;
	  min-width:210px;
	  }

/*PRODUCTS*/
.product_wrap {background:#FFF;
				margin:0px;
				min-width:210px;
				max-width:600px;}
	  
				   
.product_wrap div {background:#093;
				   margin:5px;
				   padding:0px;
				   min-height:100px;
				   float:left;}

.product_wrap .title {width:120px;}
<style/>
<body>
<div class="product_wrap">
  
<!--Title-->
<div class="title"><?php echo htmlentities($_POST['title']);?></div>
</div>
</body>

How can I amend this?
Thank you in advance.

I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text.

However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox.

However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML.

Is there a way to fix this or am I going to have to go back to JavaScript?

[code]
css:
body {
background: url(images/sips_menu.gif) no-repeat;
}

a.con {
z-index: 1;
}

a.menu {
z-index: 2;
}

/*set whole page as an invisible link*/

a.con:link,a.con:visited,a.con:hover,a.con:active {
background-color: transparent;
display: block;
border: none;
position: absolute;
top: 0px;
left: 0px;
width: 790px;
height: 540px;
text-decoration: none;
cursor: default;
}

/*set span for whole page as visible only when hovering over page*/

a.con span {
display:none;
}

a.con:hover span {
color: black;
font-weight: normal;
display: block;
text-decoration: none;
font-size: 11px;
font-family: arial, sans-serif;
text-align: left;
position: absolute;
top: 125px;
left: 580px;
width: 170px;
height: 150px;
}

/*menu links - when mouse is over these it is not over general page anchor*/

a.menu:link,a.menu:visited,a.menu:hover,a.menu:active {
background-color: white;
border: 1px solid black;
color: #617AB2;
font-size: 12px;
font-weight: bolder;
font-family: arial, sans-serif;
text-decoration: none;
text-align: left;
padding: 4px 6px 4px 6px;
}

a.menu:hover {
color: red;
}

/*menu link rollover text visible when mouse over*/

a.menu span {
display: none;
}

a.menu:hover span {
color: black;
font-weight: normal;
display: block;
}

/* Ids to position each of the menu links */

#one {
position: absolute;
top: 180px;
left: 20px;
}

#two {
position: absolute;
top: 250px;
left: 250px;
}

#three {
position: absolute;
top: 380px;
left: 220px;
}

#four {
position: absolute;
top: 320px;
left: 420px;
}

#five {
position: absolute;
top: 450px;
left: 565px;
}

/* Ids to position the span tags*/
#a {
position: absolute;
top: -55px;
left: 560px;
width: 170px;
}

#b {
position: absolute;
top: -125px;
left: 330px;
width: 170px;
}

#c {
position: absolute;
top: -255px;
left: 360px;
width: 170px;
}

#d {
position: absolute;
top: -195px;
left: 160px;
width: 170px;
}

#e {
position: absolute;
top: -325px;
left: 15px;
width: 170px;
}

xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<p><a class="con" href="#"><span>text</span></a></p>
<p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p>
<p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p>
<p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p>
<p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p>
<p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p>
</body>
</html>

Hello,

If you go to http://tombraiders.net/katie/sid/index.html

User: letme
Pass: in

you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this?

Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long.

Thanks!

Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm
The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this?

Thanks,
Geoff

Code:

<html>
	<head>
		<style type="text/css">
			.image
			{
				border			: solid black 1px;
				margin			: 5px;
				padding			: 5px;
				float			: left;
			}
			.description
			{
			}
		</style>
	</head>
	<div class="image">
		<img src="" width="100" height="100"/>
	</div>
	<div class="description">
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
	</div>
</html>

I am relatively new to using div tags - transitioning from table tag to organize pages. I want the checkboxes to be aligned to the left inside a container that is centered in the body. Currently it is all aligned to the left for some reason. The body tag has no text-align or any other css rule manually set.

Code:

<div style="display: block;text-align;left;float: center;margin-left: auto;margin-right: auto; border: .1em solid;width:400px; position: relative; clear:both;">
<div style="display: block;text-align;left;float: left;margin-left: auto;margin-right: auto; border: .1em solid; position: relative; clear:both;">
<INPUT TYPE="CHECKBOX" NAME="cartoon">cartoon<BR>
<INPUT TYPE="CHECKBOX" NAME="comicstrips">comicstrips<BR>
</div>
</div>

thanks.

Firefox: all looks fine except the checkbox container does not appear to be inside the surrounding container - the outer container div appears as a line (it's border) at the top of the inside div with the checkboxes

IE8: on a test page with nothing else - appears as Firefox. In my page with several other divs it appears with one container inside another fine, but the main container is not centered.

I have looked at several tutorials about float etc but...wits end...
thanks.

Hello,

I have slidedoor buttons on my website, which are enclosed inside table cells.

The problem is that some of the button text a little long and when you shrink the browsers window, the text starts jumping to the next line.

How do you make it so the text will always stay in one line?

Hi,
This is only happens in IE, in firefox (the only 2 browsers I tested) works fine.

http://nazgulled.no.sapo.pt/test.html

There's only one image inside the <div> tag, and I have set that div tag style to have a 10px height. But that doesn't work on IE... it's like there were some spaces wich because of the font-size it makes the height be more than 10px.... I wanted to fix that but how can I do it?

One solution is to make the div tag like this:
Code:

<div id="test"><img src="spect.gif" width="300" height="10" /></div>

instead of this:
Code:

<div id="test">
  <img src="spect.gif" width="300" height="10" />
</div>

But I don't want to fix it that way...

Any help would be hot, thanks.

Hi,

For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah.

The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line.

For example, if I had something that looked like:

The quick brown fox
jumped over the fence
and ate the cat

And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like:

The quick
brown fox jumped over
the fence and ate the cat

Does that make sense? Any solution to that? The style I'm using is simply

Code:

h1
{	
	position:relative; 	
	font: 12px/14px Verdana;
	display:inline;
	margin:0;
}

TIA!

My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np

thanks.