CSS - Ie Problems (surprised?) With Dynamic Elements

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page.

The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows:

Code:

.w3type{color: black; background-color: #FFCE6B;}

Code:

.w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}

I add this class to a <td> tag:

Code:

<td class="w3type">

and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it.

The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code?

If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges).

Thanks for any help

I don't know if that is what one would call this topic...but I'm having a lot of trouble understanding "referencing elements" in CSS.

for example what is the difference between:
Code:

ul li { } 

and
Code:

li ul{ } 

Or let's say I have:
Code:

<div id="bottom">
 <a id="copy" href="http://www.whatever.com">Whatever</a><br>
 <a class="credits" href="http://www.anothersite.com">Another Site</a><br>
 Some other random text
</div>

What is the CSS to reference the link with id="copy"? or the link with class="credits"?

Many menus use nested <ul>s and <li>s and have IDs or classes for them as well. I'm very confused as to the syntax to reference an <li> in a <ul> as opposed to a <ul> in an <li>.

Anyone have links to some documentation on this?

Interesting situation i have.

In my css i have this declared
Code:
css

a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; } 

a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; } 

div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }

For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global.

However, in firefox, they all inherit the traits from the #buenprov_content

Even links not inside divs with that ID....
as shown: Here ( The ones in the fading content should be a different color )

Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help?

Thanks.

Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own.

Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning.

Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/

Before I make the full site I want to work out layout troubles I've been having.

I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice.

So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers?

Here is the code that I think is relevant:

Code:

p {font-size: .75em; font-weight: bold; margin-left: 12em;
		margin-top: 8em;}

	#content {margin-top: 10px; margin-bottom: 10px;
		margin-right: auto; margin-left: 3em;
		width: 800px; padding: 20px;
		background: transparent;}

	#overlayback {position: absolute; top: 8em;
		left: 15em; width: 250px; height: 250px;
		z-index: 0;
		filter: alpha(opacity=80); opacity: .80;
		background: #FFF;}

	#overlaytext {position: absolute; top: 3em;
		left: 15em; z-index: 1;}
		
	h1 {font-size: 6em; margin-left: .1em;
		margin-top: .75em;}

	h2 {font-size: 1em; font-weight: normal;
		margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
	<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
		<div id="overlayback"></div>
		<div id="overlaytext"><h1>fasu</h1>
		<h2>2006-2007</h2>
		<p>coming soon</p></div>
	</div>

I hope I've been clear and thanks in advance for any advice. It's very much appreciated.

I'm floating an image left and on the right, I'm placing a tabbed menu. FF lines the menu at the top-right corner, IE lines it up at the bottom-right(which is correct). I've tried margin, padding, vertical-align, but nothing will pull that menu down without severely affecting IE. Any suggestions?

Hi guys,

could you help me out with following issue:


See this Picture for better understanding:
http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink


WHat i have is a div container (mainContent)
In which i have some text in a Paragraph <P>
and in the middle of this <P> i am trying to make a box
which will contain a list of links.

Have no clue how to achieve this.

My idea would be:

<div id: mainContent>
//text//<div style="???">
//Link//<div style="float:right; DONT Know how to lower vertically??">

Good ideas for where i can find a solution?

Hi,

q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height.

To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line.

Code:

#t1 a {font-size:10px;
	font-family:verdana;
	font-weight:bold;
	border:1px outset aqua;
	background-color:aqua;
	color:#000000;
	text-decoration:none;
	display:inline;
	width:15%
	word-spacing: 0;



}
...
<div id="t1">


 This is the 
place where the logo goes

 <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>      
  <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>  
</div>

hello everyone, 'tis my frist post... Just had'a quick question

I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff.

However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible?

here's the code, l was trying to get to work with this:

Code:

<HTML>
<HEAD>
<style>

/*Left searchBar Cap*/
td.leftCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x1.gif');
	background-position: 0px 0px;
	width: 28;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x3.gif');
	background-position: 0px 0px;
	width: 34;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}


/*searchBar Top bar*/
td.searchTop{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x2.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	width: 425;
	height: 16;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

/*searchBar Bottom*/
td.searchBottom{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_3x1.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
	width: 425;
	height: 15;
}


/*center of searchBar*/
td.searchCen{
	background-color: limegreen;
	background-position: 0px 0px;
	width: 425;
	height: 19;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

BODY {
	background-color: #c0c0c0;
	background-attachment: scroll;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
}

/*input*/
.input {
	background-image: url('images/searchBar_2x1.gif');
	color: #191919
	border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
	font-family: Comic Sans MS (cursive);
	font-weight: extra-bold;
	font-size: 10pt;
	width: 425; 
	height: 19;
}


</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>

<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">


<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>

</BODY>
</HTML>

Thanks for your help!
Samantha G.

I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div.

I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo.

the (pertinent) css is:
Code:

#main {
	width: 875px;
	background-color: #FFCC77;
	border-style: inset;
	border: 2px solid #008080;
	margin-left: auto;
	margin-right: auto;
	
	}

#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;

}

#logo { 
	width:300px;
	height:155px;
	float: left;
	} 

#contact_info { 
		color: #800080;
		font-variant: small-caps;
		font-family: sans-serif;
		font-weight: 500;
		font-size: 14px;
		padding-top:0px;
		padding-right:10px;
		float: right;
		}

#picture {
	width: 160px;
	height: 139;
	margin: 10 10 10 10px;
	}

The html is:
Code:

<body>

<div id="header">
			
			<img src="Styles/redonelogo.jpg">
			
			<img src="Styles/picture.jpg">
			
			<div id="contact_info">
			<p>Casa Grande Acclaim Realty<br/>
			11283 N. Henness Road<br />
			Casa Grande, Arizona 85194 <br />
			Phone: (520) 560-8366 <br />
			Fax: (520) 421-1444
			</p>
			</div>
			
			
			
			<div id="slogan">
			Serving All of Pinal County
			</div>			
			
			<ul id="nav">
			<li><a href="About" target="_self">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="index">Home</a></li>
			</ul>
	
</div>
 
<div id="main">

	<div id="border"></div>
	
		<div id="innerloop">

		
		
		<div id="equal"></div>	
		<div id="mls"></div>		
		
		<div id="secondinnerloop">
		<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
				<div id="PicBackground">
  				<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
		</div>
												
			<script type="text/javascript">
			RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
			</script>	
					
		</div>
		
		</div>
		
</div>		





</body>
</html>

Hi everyone

Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics:

http://www.crashingbydesign.com.au/newsite/

The relevant code is as follows:

Code:

<div id="content_container">
  <div id="belowbg">
    <div id="left"> 
       <div id="h3lft"> 
          <h3>Welcome</h3>
       </div>
       <div id="contentlft">
	<p>Lorem ipsum ...</p>
       </div>
       <div id="footlft"></div>
     </div>
     <div id="right"> 
       <div id="h3rght"> 
          <h3>Latest</h3>
        </div>
	<div id="contentrght">
				<p>Lorem ipsum ...</p>
	</div>
	<div id="footrght"></div>
     </div>
   </div>
   <div id="footer"> 
      <p>text</p>
    </div>
</div>

The relevant CSS is as follows:

Code:

#content_container {
	position: absolute;
	top: 406px;
	left: 50%;
	margin: 0 0 0 -372px;
	width: 742px;
	height: auto;
	z-index: 10;
}

#belowbg {
	padding: 0 11px 11px 11px;
	width: 720px;
	height: auto;
	background-color: #313131;
}

/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#left {
	float: left;
	width: 481px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3lft {
	width: 481px;
	height: 25px;
	background: url(images/welcomehd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentlft {
	width: 459px;
	height: auto;
	background-color: #293942;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block; 
}

#footlft {
	width: 481px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/welcomeft.gif) no-repeat;
	display: block;
}

#right {
	float: right;
	width: 230px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3rght {
	width: 230px;
	height: 25px;
	background: url(images/latesthd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentrght {
	width: 208px;
	height: auto;
	background-color: #525252;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block;
}

#footrght {
	width: 230px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/latestft.gif) no-repeat;
	display: block;
}

#footer {
	position: relative;
	top: 0;
	left: 0;
	width: 720px;
	height: 188px;
	padding: 20px 10px;
	margin: 0;
	background: url(images/btmhatlines.gif) right no-repeat;
	font-size: 1.1em;
	line-height: 1.6;
	text-align: center;
}

Can anyone see my mistake?

Cheers

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance):
- the top main box is pushed below where the left boxes end
- the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE)
- "Recipes" tab isn't borderless on the bottom edge
- left boxes are the wrong size and push "Clear List" out of bounds
- search button is off in relation to search box

mcrackan.com/recipes/csstest.htm
mcrackan.com/recipes/css/default.css
(Sorry about the non-links. I'm apparently not allowed to post click-able links yet.)

Can anyone point me in the right direction for whatever I'm doing wrong?

- Dinah

Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary.
I should go with the flow.
So I copied a basic page structure and twiddled a little.

Here is the result so far
html link

css link

A couple of questions.
1. Would you say I'm on the right track, or should I be looking at a different style structure?
2. The page appears in ie to have gaps around the elements.
In Mozilla it looks like I hoped it would look.
How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix.
No luck so far. Any help, advice appreciated.
Thanks Solar..