CSS - Floating Div's Not Clearing Headings...

Hi

I am making a website where i have a main heading on all pages' start.

I want to control its looks with CSS, i have an external CSS that controls links and body text etc.

i have tried in external CSS

Code:

H2 {

	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;

}

and on pages i use

<h2> heading is here </h2>

but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet.

Please shed some light on this...

thanks

The site in question... http://cbo4edu.org/newSite/index.html

I know this is probably a very simple fix but I've tried everything I could think of so I now have to rely on the Dev Shed community.

Can someone please tell me why theh3 tag in the center column is underlined? I only want this heading to be underlined when someone hovers over it. C

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

Is it possible to set link styles that are defined inside of a heading tag...

for example,

h1 a:link{bleh}
h1 a:visited{bleh}
h1 a:hover{bleh}

I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

Hi all,

I have a problem with clearing my CSS in IE and opera.
My website is b-artdesign.
I know no links are allowed but couldnt explain it different.
its a com

Seems to work fine in firefox...
worked just perfect in IE.. but when adding some CSS code it all went wrong..

dono what happened... cant figure it out.

thanks in advance..
Bart

Hi,

The attached file has the div's using float. But at the end the footer dosen't extend beyond the content or the the content dosen't push the footer. I tried using {clear:both} but dosen't seem to work. I would appreciate if someone had a look at the code and suggest a workaround.

thanks,
Curio

I have been working on a website design for some days now.

I thought I had it pretty much done until I checked some of my longer pages out in IE9 and the clear:both is not working in one position causing the footer to sit over some of the content. It is fine in FF.

I have spent hours going over the code and I just cannot understand why.

Can anyone give me any pointers?

http://nationwideinnovations.co.uk/garage-doors.html

Thanks in advance

I'm pretty sure there isn't a way to do this, but i am curious..
I know that i could answer the first question if i had a printer that wasn't out of ink .. but here goes.

First: Are CSS attributes that are assigned to the media Screen inherently assigned to Print even if you point the Print media a different stylesheet?

Second: Is there a way to clear a stylesheet values? basically making the stylesheet null or empty?

I have a list item like this:

<li><img src="" /><a href="#">NAME</a><br class="clearleft" /></li>

quick css:
li { border-top: 1px solid #ccc; }
li img { float: left; }
.clearleft { clear: left; }

the problem:
The image that is floating is of taller than the text next to it. On FF and Safari, the border lines up below the image, on IE, the border is under the single line text.

http://abodycars.homelinux.net/forums/login.php - HTML
http://abodycars.homelinux.net/themes/default.css.php - CSS

It's a site I'm starting to build. For whatever reason, in firefox, the navigation menu is on the left side of the screen and the form is on the right side. In IE, the desired behavior I want (nav bar on top, form underneath) is there.

Although I know how IE is and there might be something wrong with my code. Everything validates...

The navigation menu is wrapped in a div, so I would expect the div to auto-clear since it should be expanding to 100% width. But that doesn't seem to be happening for some reason...can anyone tell me what I did wrong? Thanks.

hi,

i have some divs within my container div. I cant get the container to wrap around the content in #contentMain (which is inside of #content.

in IE, the container wraps after the #leftNav (inside the #conent) but FF wraps after the #nav div

does anyone know how I cant sort it? thanks

html PHP Code:
<div id="container">

<div id="header"></div>

<div id="nav">
//topNav
</div>

<div id="content">

<div id="leftNav">
//leftNav
</div>
    
<div id="contentMain">

//content, links, images and stuff

</div>

</div>
</div> 





css PHP Code:
#container {
        margin:0px auto;
        padding: 0;
        width: 760px;
        /*border: 1px solid #666;*/
        background: url(../images/bodyImg.gif) no-repeat top left;
    }

    #header {
        margin:0px auto;
        padding: 0;
        width: 760px;
        height: 100px;
        background: url(../images/header.gif) no-repeat top left;
    }
    
    #nav {
        width:760px;
        height: 25px;
        padding: 0;
        margin:0;
        background-color: #eee;
     }
    
    #content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 630px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

    .imgMap1 {
        width: 220px;
        position: relative;
        top: 200px;
        left: 30px;
    } 

I am working on a new page and have got things working in firefox, but the footer and a couple of other things are not working very well in IE7, can anyone point me in the right direction on where I need to look for the problem, thanks:

the page is at: tinybrandsrock [dot] com

thank you.

So i've got a dillema where I have a page that has a div floating to the left of multiple story divs. I'll start off by giving source code:

http://graffetto.com/chops/float.html

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Floating Divs</title>

</head>
<body>

	<div class="floatLeft">
		this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left 
	</div>

	<hr />
	<div class="storyBlock">
		this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa 
	</div>
	
	<hr />
	<div class="storyBlock">
		this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa 
	</div>
	
	<hr />
	<div class="storyBlock">
		this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa 
	</div>
	
	<hr />
	<div class="storyBlock">
		this is a story block fds afds af dsa fdsa 
	</div>

	<hr />
	<div class="storyBlock">
		<img src="story_image3.jpg" alt="" title="" />
		this is a story block fds
	</div>
	
	<hr style="clear: both;" />
	<div class="storyBlock">
		this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa 
	</div>
	
	<hr />
	<div class="storyBlock">
		<img src="story_image2.jpg" alt="" title="" />
		this is a story block fds afds af dsa fdsa 
	</div>

</body>
</html>

CSS:

Code:

body {margin: 10px;}

.floatLeft {
float: left;
width: 200px;
height: 600px;
margin: 0 10px 10px 0;
border: 1px solid red;
padding: 10px;
}

.storyBlock {
width: 400px;
margin: 0 0 5px 0;
}

.storyBlock img {
float: left;
margin: 0 5px 5px 0
}

The fifth 'storyBlock' div has an image that is taller than that of the text within that div. I need to clear that div around the floating image to the left, but I can't use clear:left because it will clear the entire 'floatLeft' div. This is what happens:

http://graffetto.com/chops/float_cleared.html

Idealy, it would look like this (note that these 'storyBlock' divs are generated dynamically):

http://graffetto.com/chops/float_ideal.html

Also - this issue is only apparent in FireFox - IE automatically clears the div.