CSS - Clearfix:after Problem

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Go to my site. Click on Pokemon.

What do I need to do to make it so the layout works on every page with every browser? Do I need to edit my .CSS file?

Problem solved, thank you very much

I'm trying to migrate my web site from layout with HTML tables to a CSS-only layout. After a great deal of blood and tears, I was able to get the page to display the way I wanted in Mozilla Firefox version #1.0. However, I'm having a problem in Internet Explorer 6.

I'm using a 3-column layout. I want to split a portion of the center column into 2 divisions that lay out side by side. The left division will display an image. The right side some text.

IE6 stacks the content vertically, instead of side by side. I've attached the CSS file and HTML file in a zip file. If you could take a look at my code, and suggest a hack for IE6, I'd appreciate it.

The Sunburned Surveyor

P.S. - Other comments on ways to improve the code or page layout are also welcome.

I'm not sure how to search for this if it has already been discussed. So, if this sounds familiar - please forgive me. I am redesiging my website into a full CSS layout to replace all of my tables. This is the original site:
http://www.erikreagan.com
This is what I'm working on for the new CSS one:
http://www.erikreagan.com/testpage.html
I have two problems. The first is that my menu on the left does not work correctly in WinIE. I used z-index to get it to work in firefox but IE still won't display it correctly. Notice that the same exact menu is in the content area and it works properly in IE. I can't figure this out for the life of me.

Here's problem two. It refers to this page:
http://www.erikreagan.com/testpage.php
In this php version of the layout the menu is the same (good in FF but bad in IE). Notice on the left there is a link that says ">>My Blog". It does not work in firefox but does work in IE. Why is that? Someone please help me. I have done all I know to fix these problems and have gotten no where. I have asked friends who tell me 'just look at the code. it's there' and I can't find a thing. This is very frustrating. Someone please help! Thank you.

CSS file this all refers to:
http://www.erikreagan.com/main.css

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

Hello,

I am having a bit of problem with UL code in my sidebar for my website. In Safari the two items in my list display correctly under the paragraph of text, but in most other browsers the first part of the first item, jumps up and overlays itself in the upper paragraph.

Here is my CSS code:
Code:

ul.sidebar {
  margin: 0 0 5px 0;
  padding: 5px 0 0 25px;
}

ul.sidebar li {
  font-size: 75%;
  list-style-type: circle;
}

ul.sidebar li a {
  color: black;
  list-style-type: circle;
  height: auto !important;
}

And here is its implementation on the website:
Code:

<div id="midcont">
        <!-- left body div starts here-->
        <p>Please use the contact form to the right for inquiries. Most questions are answered within 24-48 business hours. Below is our direct contact information.</p>
        <br/>
        <ul class="sidebar">
        <li><b>E-Mail:</b> xxx@xxx.com</li>
        <li><b>Phone: </b>(xxx) yyy- zzzz</li>
        </ul>
        <!-- left body div ends here-->
      </div>

Thanks in advance for all your help!

Link is he http://setupyourblog [dot] com

I use a stylesheet to define the style of 'a' i.e hyperlinks.
it looks something like this:
a {
color:white;
font-family:verdana, arial, helvetica, sans-serif;
text-decoration:none;
}
a:link {color:white;}
a:visited {color:white;}
a:hover {background-color:white;
color:#808080;
}

This works great, but how do I explicitly change the style of other hyperlinks on the same page. They would typically be in a div. I have tried all kinds of things anc just can't get it to work.
Thanks a lot...

Hi, I have a div with a form in it that's not displaying properly in IE. It's meant to display a breadcrumb menu and text input on opposite sides of the screen then followed by a hr, but in IE the input displays below the menu text and interferes with the hr...

CSS:

Code:

	

#contentHeader { 
   margin-top: 2px; 
   font: 11px lucida grande, verdana, arial, sans-serif; 
   padding-top: 2px; 
   clear: all; 
} 

#pathway { 
   float: left; 
} 
#searchForm { 
   text-align:right; 
   float:right; 
   margin-right: 5px; 
} 

html:

Code:

<div id="contentHeader"> 
      <span class="pathway">Home </span>       
<div id="searchForm"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="search" /></form></div> 
   </div> 
   <hr /> 

you can see what happens here - http://jmaid.org/index.php?option=c...ntpage&Itemid=1 - How can I fix this?

TIA

Hey all,

I'm having this problem with some code.

as you can see, I have a wrapper div keeping everything centered. Then I have a headwrap div keeping the menu etc together and below that I want to have content. Here is the HTML

<div id="wrapper">

<div id="headwrap">
<div id="title"></div>

<div id="menuarea">
<div id="menupic"></div>

<div id="nav">
<ul>
<li id="one"><a href="#">Home</a></li>
<li id="two"><a href="#">Buy</a></li>
<li id="tre"><a href="#">Sell</a></li>
<li id="for"><a href="#">About</a></li>
<li id="fiv"><a href="#">Contact</a></li>
</ul>
</div>

</div>
</div>


<div id="content"></div>

</div>

Here is the CSS

#wrapper {
width:780px;
margin:0 auto;
text-align:left;
}

#headwrap {
width:780px;
height:auto;
margin:0px;
padding:0px;
}

#title {
float:left;
width:262px;
height:300px;
border:1px solid #97A953;
}

#menuarea {
float:right;
width:510px;
height:300px;
border:1px solid #97A953;
}

#content {
font-size:12px;
}

In IE the content div shows up below the headwrap div just fine. I can add a margin on top to drop the content down a bit without problems. BUT in FF the content div ends up enveloping the headwrap. When that happens I can't margin the top. It just ends up pushing down the headwrap div, too.

Any thoughts as to why this is happening pls?

Hi Guys,

I need some help.

Take a look at a layout i recently coded with css and strict xhtml

http://www.invalidheart.org/my/

I'm having a problem with my coding, I don't know what I'm doing wrong, but it doesn't work properly in FireFox OR IE, the problem in firefox is the background doesn't continue with my two columns, so intead of my white background, it shows the background image, and the footer half-way through, do you see?

also, in IE, the footer is suppose to be directly at the bottom (hence, bottom:0) but, it doesn't work. But, the background works fine in IE.

Can someone help me find out the errors in my CSS coding?

here is my CSS

Code:

.hide
    {
    display: none;
    }

body
    {
    font: 11px/1.7 Garamound, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", Utopia, "Times New Roman", times, serif;
    background-color: #fff;
    text-align: center;
    padding: 0;
	background: url(bg.gif);
    margin: 0;
    }
	
#container
    {
    width: 748px;
	background: #fff;
    background: url(bgfront.gif) repeat-y;
    padding-bottom: 30px;
    }
	
div#wrap {
    position: relative;
    background: url(bgfront.gif) repeat-y;
	margin:0 auto;
	text-align: left;
	width:748px;
	}

body#sectionone #menu li#one a,
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a,
body#sectionsix #menu li#six a,
body#sectionseven #menu li#seven a
    {
    background-position: 0 -20px;
    color: #fff;
    font-weight: bold;
    }

#main {
    margin-left: 25px;
    float:left;
    width:450px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}
#sidebar {
    width:232px;
    margin-left:492px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}

#mainmiddle
	{
	width: 420px;
    padding: 3px 0 0 9px;
	}
	
#sidebarmiddle
	{
	width: 202px;
    padding: 3px 0 0 9px;
	}

#wrap > #sidebar {
	width:200px;
}
	
p
    {
    color: #555;
    margin-top: 5px;
    margin-bottom: 10px;
    }

blockquote
    {
    padding: 0 0 0 10px;
    font-style: normal;
    margin: 0 15px 0 25px;
    }

blockquote p
    {
    color: #777;
    }

h1
    {
    display: none;
    }

h2
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    text-transform: uppercase;
    color: #666;
    margin: 18px 0;
    }

h3
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    color: #666;
    margin: 18px 0 0 0;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #4B80EA;
    text-decoration: none;
    }

a:hover
    {
    color: #386DE8;
	border-bottom: 1px solid #386DE8;
    }

a:active
    {
    color: #FB7FD7;
    }

h3 a:link, h3 a:visited, h3 a:hover, h3 a:active
    {
    border: 0;
    }

#header
    {
    margin: 0 10px;
    background-image: url(header.jpg);
    height: 315px;
    width: 729px;
    }

#menu
    {
    margin-left: 25px;
    margin-right: 20px;
    }

#menu ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
    }

#menu ul li
    {
    display: block;
    float: left;
    text-align: center;
    }

#menu ul li a
    {
    font: 9px/1.9em "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
    background: url(navbg2.jpg) top left repeat-x;
    width: 100px;
    height: 18px;
    padding-top: 2px;
    color: #666;
    display: block;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    }

html>#menu ul li a
    {
    font-size: 9px;
    }

#menu ul li a:hover
    {
    color: #000;
    background-position: 0 -60px;
    text-decoration: none;
	border: 0;
    }

#menu ul li a:active
    {
    color: #000;
    background-position: 0 -40px;
    }

#whitespace
	{
	height: 15px;
    margin-left: 25px;
	background: #fff;
    text-align: center;
	width: 700px;
	}

#copyright
    {
	position: relative;
    bottom: 0;
    width: 700px;
    font: 9px/1.8 "lucida grande", tahoma, verdana, sans-serif ;
    color: #555;
    text-align: center;
    margin-left: 25px;
    height: 18px;
    padding-top: 2px;
    background: url(navbg2.jpg) repeat-x;
    background-position: 0 0px;
    }

#copyright a:link, 
#copyright a:visited
    {
    color: #666666;
    }

#copyright a:hover,
#copyright a:active
    {
    color: #000;
    border-bottom: 1px dotted #000;
    }

Thanks so much guys for taking the time to look this over for me.

i'd like to align my table to the left, i ve tried so many stuff but cant get it....
in html
something like this

<table width="75%" border="0" align="left">

what is the css way of getting this result...

pls help me out...

Hey guys.

I made a little news script for my site, but if I submit more than 1 news "article" IE doesn't style it. It will style the first article though. In FF everything is fine... If you view it in firefox you will see what im talking about.

To see it visit http://www.leetwebmasters.com/beta_site/test2/

Where it says "THIS TEXT SHOULD BE GRAY", that part is the title and everything on that line should be gary, then below it is the news, "meh".

Here is my code:
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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/style.css" />
</head>

<body>
<div id="container">
<div id="topbanner"><img src="images/topbanner.gif" /></div>
<div id="mainbanner"><img src="images/mainbanner.gif" /></div>


<div id="navbox">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<!-- END NAVBOX -->
</div>


<div id="viewnews">
<?php
include('');
$query = "SELECT * FROM articles LIMIT 4";
$rs = mysql_query($query) or die (mysql_error());


while($row = mysql_fetch_object($rs)) {
print "<div class=\"title\">";
print "Title: ".$row->title ." | Submitted on: ". $row->date . " | Submitted by user: ". $row->submitted_by;
print "</div>";

print "<div class=\"news\">";
print "News submitted:<br /> ".$row->news;
print "</div";
}
?>
</div>


<!-- END CONTAINER -->
</div>
</body>
</html>

CSS:
Code:

#container
{
width:950px;
margin:auto auto;
}
#mainbanner
{
clear: both;
}

#viewnews
{
float: right;
width:750px;
height:450px;
}

.title {
float: right;
background-color:#D6D6D6;
width:750px;
height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

.news
{
background-color:#F5F5F5;
}

#navigation
{
float: left;
width: 200px;
}

#navigation ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

#navigation li { 
	border-bottom: 1px solid #828282; 
}

#navigation li a:link, #navigation li a:visited {
    font-size: 90%; 
    display: block; 
    padding: 0.4em 0 0.4em 0.5em; 
    border-left: 12px solid #828282;
    border-right: 1px solid #828282;
	background-color:#939393; 
	color:#EDEDED;
	text-decoration: none; 
	}
	
#navigation li a:hover {
	background-color:#AAAAAA;
}

Can someone please help me? I can't figure out what is wrong

I have a really annoying issue with IE6. I've gotten the page to work properly for any other browser (FF, Safari, IE7, Opera), but IE6 screws the way the page looks.

Can someone please give me some ideas as to how to change the CSS or HTML so that I fix this problem but at the same time don't cause problems with other browsers?

sbcclending.com/test/

Thanks
RG