Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Nested Divs in Work in IE Not In Firefox 2

Status
Not open for further replies.
fawkes

fawkes

Technical User
Sep 12, 2003
343
GB
I have a stylesheet

Code: 
/* Body tag */ 
/* Preset the font family and the background colour */
Body
{
    	Font-size: medium;
    	Color: black;
    	Font-Family: Arial, SansSerif;
	Background:#FFFFcc;
}

/* Anchor/Link tags */
/* set the link colour to blue */

a:link
{
	Color:#0000ff;
}

/* Set the visited, hover and active colours for links to be red */

a:visited, a:hover, a:active
{
	Color:#ff0000;
}

/* Set the Logo section */
/* Establish the width and height of the logo, the border settings and the alignment */

#Logo
{
	Border:none;
	Text-align:center;
}

#Logo img
{
	Width:443;
	Height:100;
}

/* Establish a set of divisions to break the page into three columns */
#ThreeColumn
{
	Display:block;
	Border:none;
	Margin:2px;
}

#ThreeColumn #Column
{
	Font-size:small;
	Display:inline;
	Width:33%;
	Text-Align:Center;
	Vertical-align:top;
	Border:none;
	Padding: 2px;
	Margin:2px;
	overflow: auto;

}

/* Establish a set of divisions to break the page into two columns */
#TwoColumn
{
	Display:block;
	Border:none;
	Margin:2px;
}

#TwoColumn #Column
{
	Font-size:small;
	Display:inline;
	Width:49%;
	Text-Align:Center;
	Vertical-align:top;
	Border:none;
	Padding: 2px;
	Margin:2px;

}

/* Provide a menu  */
/* Ensure that the menu displays in line */
#Menu
{
	Display:block;
	Font-Size:small;
	Width:100%;
	Text-Align:Left;
	Vertical-Align:Top;
	Border-Right:None;
	Border-Top:None;
	Border-Bottom:None;
	Border-Left:None;
	Margin: 0px;
	Padding: 0px;

}

#Menu a
{
	Display:inline;
	Text-Align:Center;
	Margin: 2px;
	Padding: 2px;
	

}

/* Provide a content section */
#Content
{
	Display:block;
	Font-Size:small;
	Width:100%;
	Text-Align:Left;
	Vertical-Align:Top;
	Border-Right:None;
	Border-Top:None;
	Border-Bottom:None;
	Border-Left:None;
	Margin: 2px;
	Padding: 2px;

}

#Content h1
{
	Text-align:center;
}

And a web page (Extract)

Code: 
<!-- Add three columns to show the address, ISO Certification and additional image -->

	<Div Class="ThreeColumn">

		<!-- Address -->
		<Div Class="Column">
			<p>Address1<br/>
			Address2<br/>
			Address3</p>
		</Div>

		<!-- ISO Certification -->
		<Div Class="Column">
			<b style="Font-size:large;">ISO 9001 Certification</p>
		</Div>

		<!-- Additional Image -->
		<Div Class="Column">
			<IMG SRC="images/myimage.gif">
		</Div>
	</Div>

Now this works fine in IE but the three sections show up in block display mode, the first one centred across the page, the second and third aligned to the left in Firefox 1.0.7

Does anyone know why?

I'm quite new to css and not sue about the differences between the browsers.
 
Sort by date Sort by votes
Just a quick look at the CSS...
Code: 
#ThreeColumn #Column
Should this not be:
Code: 
.ThreeColumn .Column
If you specify a class in the HTML, then you use . in the stylesheet. If you specify an ID in the HTML, then you use the pound # symbol (and you can have only the one item with that ID per page).

I suggest you drop using caps for the styles themselves too...
Code: 
[b]f[/b]ont-size: small;

You may need to place position:relative on your initial definition for ThreeColumn div as well.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
I've cahnged the css to:

Code: 
/* Body tag */ 
/* Preset the font family and the background colour */
Body
{
    	Font-size: medium;
    	Color: black;
    	Font-Family: Arial, Helvetica, sans-serif;;
	Background:#FFFFcc;
}

/* Anchor/Link tags */
/* set the link colour to blue */

a:link
{
	Color:#0000ff;
	background-color:#FFFFcc;
}

/* Set the visited, hover and active colours for links to be red */

a:visited, a:hover, a:active
{
	Color:#ff0000;
	background-color:#FFFFcc;
}

/* Set the Logo section */
/* Establish the width and height of the logo, the border settings and the alignment */

#Logo
{
	Border:none;
	Text-align:center;
}

#Logo img
{
	Width:443px;
	Height:100px;
}

/* Establish a set of divisions to break the page into three columns */
.ThreeColumns
{
	position:relative;
	display:block;
	border:none;
	margin:2px;
}

.ThreeColumns .Column
{
	position:relative;
	font-size:small;
	display:inline;
	Width:33%;
	text-align:center;
	Vertical-align:top;
	border:none;
	padding: 2px;
	margin:2px;
	overflow: auto;

}

/* Establish a set of divisions to break the page into two columns */
.TwoColumn
{
	Display:block;
	Border:none;
	Margin:2px;
}

.TwoColumn .Column
{
	Font-size:small;
	Display:inline;
	Width:49%;
	Text-Align:Center;
	Vertical-align:top;
	Border:none;
	Padding: 2px;
	Margin:2px;

}

/* Provide a menu  */
/* Ensure that the menu displays in line */
#Menu
{
	Display:block;
	Font-Size:small;
	Width:100%;
	Text-Align:Left;
	Vertical-Align:Top;
	Border-Right:None;
	Border-Top:None;
	Border-Bottom:None;
	Border-Left:None;
	Margin: 0px;
	Padding: 0px;

}

#Menu a
{
	Display:inline;
	Text-Align:Center;
	Margin: 2px;
	Padding: 2px;
	

}

/* Provide a content section */
#Content
{
	Display:block;
	Font-Size:small;
	Width:100%;
	Text-Align:Left;
	Vertical-Align:Top;
	Border-Right:None;
	Border-Top:None;
	Border-Bottom:None;
	Border-Left:None;
	Margin: 2px;
	Padding: 2px;

}

#Content h1
{
	Text-align:center;
}

And the web page to:

Code: 
<!-- Add three columns to show the address, ISO Certification and Additional symbols -->

	<Div Id="ThreeColumns">

		<!-- Address -->
		<Div Class="Column">
			<p>Address1<br/>
			Address2<br/>
			Address3</p>
		</Div>

		<!-- ISO Certification -->
		<Div Class="Column">
			<p><b style="Font-size:large;">ISO 9001 Certification</b></p>
		</Div>

		<!-- Additional Image -->
		<Div Class="Column">
			<IMG SRC="images/myimage.gif" alt="MyImage">
		</Div>
	</Div>

I have validated the css and html and found out about the Id issue, I used a microsoft tool to start the css and that is why some of the text is in capitals, I have also added the position:relative to both .ThreeColumns and .ThreeColumns .Column but firefox shows the three columns on seperate lines.
 
Upvote 0 Downvote
I set the border for .ThreeColumns to 5px solid and for .ThreeColumns .Column to 3px solid to see how Firefox was displaying the divs.

The div class ThreeColumns placed a 5px border around all three items but a small rectangle was placed at the beginning and at the end of each div class Column nested in the div class ThreeColumns.

It seems that when I start another tag nested in the div class Column tag the style for the class is overwritten or ignored (maybe I'm seeing it wrong), how do I avoid this?
 
Upvote 0 Downvote
Well... I was playing with what you had and came up with this example:
Code: 
<html>
<head>
<style type="text/css">
.threeColumns {
    position:relative;
    float:left;
    display:block;
    border:none;
    margin:2px;
    width:100%;
}
.threeColumns .column {
    float:left;
    display:block;
    font-size:small;
    width:32.3%;
    text-align:center;
    vertical-align:top;
    border:none;
border:1px solid blue; /* used for debugging */
    padding:0.2%;
    margin:0.2%;
}
.threeColumns .column2 {
	position:absolute;
	width:33%;
	margin:0.2% 33%;
}
.threeColumns .column3 {
	float:right;
}
.threeColumns .column2 .emph {
	font-weight:bold;
	font-size:large;
}
</style>
</head>
<body>
<div class="threeColumns">
	<div class="column column1">
		<p>address1<br/>address2<br/>address3</p>
	</div>
	<div class="column column2">
		<p class="emph">ISO 9001 certification</p>
	</div>
	<div class="column column3">
		<img src="images/myimage.gif" alt="myimage">
	</div>
</div>
</body>
</html>

I have switched to using % for margins because it manages scaling and resizing better. Have a look and see if there is something in there that helps.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Add float:left; to the ThreeColumns/Column descriptor.

Also, "ThreeColumns" is an ID and "Column" is a class per your last post [BabyJeffy corrects this in his post], so if you keep that going, you need to change your STYLE to #ThreeColumns .Column.

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
Oh, and you may have to set your width to 32% (instead of 33%). With my window maximized, it wraps at 33% [although another way I got rid of the wrap was to take the padding and margin settings out of the ThreeColumns/Column descriptor].

--Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
It's messing up because you're setting <div class="column"> to be [tt]display: inline[/tt] but to contain block level content like <p> elements.

Try doing it like this instead:
Code: 
.ThreeColumns
{
    display:block;
    border:none;
    margin:2px;
    overflow: auto;
}

.ThreeColumns .Column
{
    [b]float: left;[/b]
    font-size:small;
    Width:32%;  /* leave a little slack for margins etc. */
    text-align:center;
    Vertical-align:top;
    border:none;
    padding: 2px;
    margin:2px;
}
You may need to apply [tt]clear: left[/tt] to content that comes after.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Jeff,

Thanks for the help, most appreciated.

Chris,

Tried your solution and it worked fine, thanks very much.

I didn't originally understand the clear:left issue but I have a horizontal line after the closing div tag so i set this to
Code: 
</div>

<hr style="clear:both;"/>

And this set the page to look the same in IE and Firefox
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
810
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
219
lmcate
lmcate
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
647
tyutghf
tyutghf
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top