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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div Align in FF 1

Status
Not open for further replies.
TamedTech

TamedTech

IS-IT--Management
May 3, 2005
998
GB
Hi Guys,

I have a couple of Div's in my site, they sit fine in IE and Netscape, however FF seems to have beef with my "margin" attributes, it just completely ignores them, which means my DIV's butt up against one another, or sit on the same row when they are meant to be above and below one another.

Any advice?

Many thanks,

Rob
 
Sort by date Sort by votes
Cut down your page code and CSS to the absolute bare essentials that show your problem. Then paste the contents of the client-side source between [code][/code] tgml tags and we can take a look.

Things to do before then... make sure you are developing to a doctype and that your HTML validates against the doctype you are using (there is a discussion on doctypes on my blog - linked below).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
which means my DIV's butt up against one another, or sit on the same row when they are meant to be above and below one another
Click to expand...

Unless you have styled them to do so, DIV elements will ALWAYS be on new rows... so we can only conclude that your CSS is specifically doing this.

As Jeff says, without seeing your code, it's hard to guess.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Guys,

I've played around and managed to solve the above problem, but with the same DIV i'm having a couple of issues.

All seems to run in fine in FF but IE has the following issues.

1. The Font-family / colour for the "|" between each link doesnt apear to work, however in FF it works fine.
2. The list is aligned to the left of the DIV in IE, and i would like it Center Aligned.

Code: 
<style>
#footnavcontainer {
	width: 820px;
	color: #ccc;
	margin:1em auto;
}

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

#footnavlist a
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #CCCCCC;
	text-decoration: none;
}
#footnavlist a:HOVER
{
	list-style: none;
	padding: 0;
	margin: 0;
	color: #666666;
}

#footnavlist li
{
display: inline;
padding: 0;
margin: 0;
}

#footnavlist li:before { content: "| ";}
#footnavlist li:first-child:before { content: ""; }

/*IE workaround*/
/*All IE browsers*/
* html #footnavlist li
{
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #footnavlist { height: 1%; }

* html #footnavlist li
{
display: block;
float: left;
}

/*End hide*/
/*Mac IE 5*/
* html #footnavlist li:first-child { border-left: 0; }</style>
</head>

<body>
<div id="footnavcontainer">
<ul id="footnavlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

Basicly this is a list of links to sit in the foot of my site, if i can get alignment issue sorted so they are center aligned i will be more than happy.

Thanks,

Rob
 
Upvote 0 Downvote
The Font-family / colour for the "|" between each link doesnt apear to work [in IE]
Click to expand...
That's because you're putting it in in two different ways. For modern browsers you're doing this:
Code: 
#footnavlist li:before { content: "| ";}
#footnavlist li:first-child:before { content: ""; }
This says "for every <li> but the first, precede it with a '|' character". The | will be in the same font and colour as the rest of the <li>. Unfortunately, IE doesn't understand the [tt]content:[/tt] rule (or [tt]first-child[/tt] for that matter), so you have to do it differently for that browser:
Code: 
* html #footnavlist li
{
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
This says (amongst other things) "draw a one pixel wide black line down the left side of each <li>". The font is irrelevant in this case, and you've specified a colour to use.

If you want to get the browsers looking more similar (and frankly, I don't think it's all that important that they do) use the "IE" method for all browsers - it's a perfectly valid approach. Here's how I've marked up a similar list on a site I maintain:
Code: 
<ul class="navbar">
  <li class="first"><a href="#">Home</A></li>
  <li><a href="#">Contact Us</A></li>
  <li><a href="#">About Infolinx</a></li>
  <li><a href="#">Disclaimer</a></li>
</ul>
with the following simple CSS:
Code: 
.navbar {
   text-align: center;
   list-style: none;
   padding: 0.25em 0;
   margin: 0;
}

.navbar li {
   list-style: none;
   display: inline;
   padding: 0 0 0 0.25em;
   border-left: 1px solid;
   white-space: nowrap;
}   

.navbar li.first {
   border: 0;
}
It'd be nice to use [tt]first-child[/tt] instead of adding a "first" class, but that's IE for you. It's not an unbearable burden anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Ah! ... I could kiss you .. but I wont lol.

You can have a purple star instead ... thankyou for that buddy .. makes life alot easier.

Rob
 
Upvote 0 Downvote
A Chris deserves more than that!

images


Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Lovly shade of Lipstick BabyJeffy ... same colour as Mrs TamedTech if i'm not mistaken lol

Rob
 
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
802
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
756
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
639
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top