CSS help again - positioning & IE

Factual Questions
1

I can provide screen shots later if needed (I’m on a computer that only has IE, so I can’t show comparision shots). I’ve got two problems.

On my front page, the navbar (text links) has to overlap the header image a bit, so I bumped the .navbar and following divs up a bit. In Safari and Firefox it looks great. In IE7 it’s up too far.

The stylesheet code is:


.bar {font-size: 12pt; 
  text-decoration:none; 
  font-weight:bold; 
  padding-top:5px;
  width:798px;
  height:50px;}

The HTML code is (not including all the following divs that are also bumped up):



<body>
<div class="wrapper">
<div style="height:187px;width:798px;">
<img src="pagepics/header.gif" height="216" width="800" align="left" alt="Silver's Kids logo" />
</div>

<div class="bar" style="position:relative;top:-35px">
Home  |  <a href="about.htm">About</a>  |  
<a href="archive.htm">Archive</a>  |  
<a href="cast.htm">Cast</a>  |  
<A href="gallery.htm">Gallery</a>  |  
<a href="contact.htm">Contact</a>  |  
<a href="links.htm">Links</a>
<Br />Updated Randomly, mostly weekends.
<hr />
</div>

So how do I get IE to display this properly?

The second problem is on most of my pages, I have a floating image on the right that starts in the header and continues into the body, then I have another floating image in the body on the right. The text and stuff is supposed to be between them, and of course, it looks great in Firefox and Safari. In IE, the text drops down below the floating image on the right.

Stylesheet code:


img.over {float:right;
  position:relative;
  z-index:2;
  height:400px;
  margin-left:5px;
  margin-bottom:35px;
  top:-6px;clear:right;}

img.side {float:left;
  position:relative;
  width:57px;
  left:-10px;
  margin-bottom:15px}

div.page {width:750px;
  position:relative;
  left:-10px;
  padding-left:57px;}

HTML code:


<body>
<div class="wrapper">
<!--start header-->
<div style="height:196px;width:798px;">
<img src="pagepics/header2.gif" height="186" width="396" align="left" alt="Silver's Kids logo" style="position:relative;left:-4px" />
<img src="pagepics/skitty.gif" class="over" height="400" />
</div>

<div class="bar" style="position:relative;top:-20px">
<A href="home.htm">Home</a>  |  About  |  <a href="archive.htm">Archive</a>  |  <a href="cast.htm">Cast</a>  |  <A href="gallery.htm">Gallery</a>  |  <a href="contact.htm">Contact</a>  |  <a href="links.htm">Links</a>
<hr />
</div>
<!--end header-->
<div class="bg" style="position:relative;top:-25px"><!-- page content -->
<img src="pagepics/about.gif" class="side" />
<div class="page">(Text goes here)</div>

Feel free to nitpick my coding too. It’s been a while and I’m basically teaching myself (again I ask, really, what was wrong with tables? sigh)

2

Pictures.

Problem 1 in IE and Firefox. As you can see, the navbar and hr is overlapping the header image.

Problem 2 in IE and Firefox. The big gap is not exactly attractive looking, but acceptable if there’s no easy fix.

3

If you’re using a fixed-width layout (and you are, since you’re sizing the text to a fixed-width graphic), can you just absolutely position everything?

4

Also, would you mind pasting your entire page and CSS source, not just the snippet? It’d be easier to tinker with/demonstrate if I can play with the whole thing. The actual images would be fantastic too. Heck, could you just publish the whole thing somewhere?

5

Won’t that mess things up if people are using different resolutions? (I honestly don’t know.)

If you PM me your email address, I can email to you. I’m not quite ready to put it up and I don’t have a website where I can hide it.

6

Here’s a sample fix for problem 1 that should look the same in both browsers. It uses absolute positioning (see live demo):

Stylesheet:



.header {
  height:187px;
  width:798px;
  top: 0px;
  position: absolute;
  }

.bar {
  font-size: 12pt; 
  text-decoration:none; 
  font-weight:bold; 
  top:145px;
  width:798px;
  height:50px;
  position:absolute;
  }

HTML:



<div class="header">
<img src="pagepics/header.gif" alt="Silver's Kids logo" />
</div>

<div class="bar">
Home  |  <a href="about.htm">About</a>  |  
<a href="archive.htm">Archive</a>  |  
<a href="cast.htm">Cast</a>  |  
<a href="gallery.htm">Gallery</a>  |  
<a href="contact.htm">Contact</a>  |  
<a href="links.htm">Links</a>
<br />Updated Randomly, mostly weekends.
<hr />
</div>

Since you asked for nitpicking:

  1. Separate content and presentation into HTML and CSS as much as possible. This’ll make later upkeep/maintenance easier. For example, the “style=blah blah”, “align=left”, width/height specifications, etc. should never be in the HTML. I moved all the presentation-related stuff to the stylesheet.

  2. I forgot what the other nitpicks were, lol.

Edit: Oops, simulposted. I’ll PM you.

7

I’ll have to add position:absolute to everything else, but it looks like that fixes the first problem. Any ideas for the second?

As far as some of the presentation in the HTML, the header is different on all the other pages - thus leading to the second problem. I’ll email it to you tonight.

8

bump to get help with the second problem (floating images making the text appear below them in IE). I’m going to fiddle with it, but I’ll like suggestions.

9

For problem #1, I solved the copyright problem by nesting both the body text and the copyright notice inside one bigger absolute layer so it looks like:

<big layer positioned absolutely right below header area>
<body text>
<copyright notice>
</big layer>

That fixed it. Here’s the HTML:



<!--end header-->
<div style="top:230px; position:absolute;">
<div class="bg"><!-- page content -->
<p class="titles">News</p>
<p>Just placing dummy text until I get all the images and stuff done.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod consectetur arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque et velit vel dui tempor accumsan. Cras fermentum dolor id felis. Donec et nibh sed risus bibendum scelerisque. Nunc pulvinar placerat libero. Integer lacus. Etiam vel enim. Proin nec elit. Sed feugiat mi. Maecenas id massa id lectus tincidunt vehicula. In dignissim lacus et mi.</p>
<p>Sed porta. Maecenas non magna ut justo ornare lobortis. Fusce posuere, risus sit amet viverra gravida, lorem odio tincidunt leo, quis lacinia pede urna eu mauris. Mauris tincidunt malesuada risus. Nunc euismod molestie magna. Duis sapien. Sed vel nulla eget risus lobortis condimentum. Sed at justo. Proin vulputate aliquam mauris. Cras vel pede eu augue posuere molestie. Morbi id justo quis velit fringilla fermentum. Fusce ac dui. Sed sit amet ipsum a nulla laoreet scelerisque. Sed fermentum odio quis massa. 	</p>
</div>
<div class="copyright" >Silver's Kids, Up at Silvercats, Thunderkitties, and all original characters © copyright 2009 by Lydean Works.<br />
	Thundercats images, characters, and logos © copyright Warner Bros. and Ted Wolf and used without permission.</div>
<!-- end page content -->

Problem #2 is more complicated. All the overlapping makes it really messy… you want the HR to extend underneath the image while at the same time getting the image to cause text below it to wrap… ugh. My (messy) suggestion would be to absolutely position everything, and then inside div.page, float an invisible div to the top right corner (where the picture’s legs would be) of an appropriate size so that the text will wrap properly. It’s really a hack, I know, but I can’t think of a better way right now that won’t cause at least one browser to misbehave. Sorry.

10

Regarding #2… at this point, I think it’d be easier to combine the logo and the kid into a single image, absolutely position that, absolutely position the navbar div on top of the graphic, and then absolutely positive the body text beneath all that, then nest a floating invisible div inside the body text so that the text will wrap right.

It’ll be really messy but it might work…

11

…

12

Except each page is going to have a different kid. If I can’t get it to work, then screw the people using IE. It looks okay. Thanks for all the help.