I have a site that I am working on at the moment. One of the pages is for links. You can see how the site is meant to look at http://www.hodsockpriory.com/new although some of the graphics are yet to be optimised and the flash file needs looking at again for file size, so be warned.

 

The problem comes on the Links page under Links>Useful Contacts. What I have here is a div with two other divs inside that are floating left and positioned absolutely. If you have a look in it on IE 7 you are seeing it as I imagined (not tried earlier versions as yet).

 

In Firefox, the images that appear at the bottom of the page (and are meant to look the same as on the homepage) appear bunched up. It's only on this line that it happens and it looks almost like the div tag with the picture in (that is sat below the content) has inherited some of the attributes of the earlier div.

 

My first thought was that there was a missing closing </div> element somewhere but I can't seam to find one and, indeed, the page validates for both CSS and HTML.

 

I'm stumped on this one. This is the first time that IE has rendered the page as I would have expected it to work and Firefox hasn't. Any help would be more than welcome.

 

I look forward to all your replies as I'm sure that the issue can be resolved. To be honest, it's probably something simple that I've overlooked.

Hi there!

 

Ive attached some screen shots of what it looks like on a Mac in FireFox, Safari and Opera!

 

Can you attach a screen shot of what it should look like?

 

Ben

well from a firefox look and a ie7 look I would hazard a guess that middle one is how it is suposed to look and the last one is how you see it FF.

 

 

I don't have enough time to look at your code at the minute but will have in about 2 hours so if no one else has helped you by then, I will have a look at it

Can you attach a screen shot of what it should look like?

 

 

Dizi is right, the middle one is how it's meant to look.

 

Thanks for looking (to both of you). I'm sure it's just something simple I've done wrong but I'm still not great with CSS. I'm getting there though.

try using a hack just for firefox since it seems to be working in ie7 so hide the code you dont want ie to see using the parent child hack like : html>body #div then your css. And try making the css in this one position:relative instead of absolute i think this could be the problem but im not sure.

try using a hack just for firefox since it seems to be working in ie7 so hide the code you dont want ie to see using the parent child hack like : html>body #div then your css. And try making the css in this one position:relative instead of absolute i think this could be the problem but im not sure.

 

I would be wary about using a hack to make the standards compliant browser work. I don't mind hacking just to get IE to work though if there is another way around it.

 

All of the CSS that's being effected is relative already. the code that's causing a problem is actually this...

 

<div class="content">
 <span class="heading">Useful Contacts<br/>Superintendent Registrar</span>

<p>Choose a catagory from the left to see the links.</p>

<div class="linkSubnav">
 <a href="links.php?p=3&i=3" class="linkSubnav">Superintendent Registrar</a><br />
 <a href="links.php?p=3&i=6" class="linkSubnav">Florists</a><br />
 <a href="links.php?p=3&i=4" class="linkSubnav">Caterers</a><br />
 <a href="links.php?p=3&i=5" class="linkSubnav">Photographers</a><br />
 <a href="links.php?p=3&i=9" class="linkSubnav">Wedding Cakes</a><br />
 <a href="links.php?p=3&i=10" class="linkSubnav">Decorations and Ideas</a><br />
 <a href="links.php?p=3&i=11" class="linkSubnav">Wedding Stationery</a><br />
 <a href="links.php?p=3&i=12" class="linkSubnav">Chair Covers</a><br />
 <a href="links.php?p=3&i=13" class="linkSubnav">What to Wear</a><br />
 <a href="links.php?p=3&i=14" class="linkSubnav">Videographers</a><br />
 <a href="links.php?p=3&i=15" class="linkSubnav">Ice Cream and Chocolate</a><br />
 <a href="links.php?p=3&i=16" class="linkSubnav">Toastmasters</a><br />
 <a href="links.php?p=3&i=17" class="linkSubnav">Arriving in style</a><br />
 <a href="links.php?p=3&i=18" class="linkSubnav">Marquee Hire</a><br />
 <a href="links.php?p=3&i=19" class="linkSubnav">Music</a><br />
 <a href="links.php?p=3&i=20" class="linkSubnav">DJs</a><br />
 <a href="links.php?p=3&i=21" class="linkSubnav">Live Bands</a><br />
 <a href="links.php?p=3&i=22" class="linkSubnav">Wedding Websites</a><br />
 <a href="links.php?p=3&i=23" class="linkSubnav">Gift Services</a><br />
</div>

<div class="linkSublink">
 <p>
		<span class="linkTitle">John Brassington</span><br />
		tel: 01777 708 631<br /><a href="http://john.brassington@nottscc.gov.uk" target="_blank" 
		class="linkLink">website</a>
		<br />
 </p>
</div>

</div>

<div class="bottomPics">
<img src="images/index/1.jpg" alt="Hodsock Priory" />
<img src="images/index/2.jpg" alt="Hodsock Priory" />
<img src="images/index/3.jpg" alt="Hodsock Priory" />
<img src="images/index/4.jpg" alt="Hodsock Priory" />   
<img src="images/index/5.jpg" alt="Hodsock Priory" />
</div>

 

And the css is......

 

div.linkSubnav{
position:relative;
width:120px;
height:auto;
float:left;
font-size:11px;
padding:8px;
background:url(../images/bg2.png);
}

div.linkSublink{
position:relative;
float:left;
top:0px;
left:20px;
width:auto;
}

div.content{
position:relative;
top:0px;
left:212px;
width:400px;
min-height:350px;
z-index:3;
}

div.bottomPics{
position:relative;
top:0px;
left:58px;
width:556px;
z-index:5;
}

 

See I still think it's something to do with the float perhaps?

Problem solved by adding clear:both to the bottomPic tag.

Problem solved by adding clear:both to the bottomPic tag.

 

Well done, thanks for posting the solution.

 

clear: both; tends to fix alot of problems as does display: inline; in IE.

 

Sadly I missed this thread but i'll be around to help next time.

I'm happy that you solved your problem

 

sorry that I didn't get back to you, I ended up with no real free time to check. But its always better when you solve a problem yourself, well in my opinion anyway

I'm happy that you solved your problem

 

sorry that I didn't get back to you, I ended up with no real free time to check. But its always better when you solve a problem yourself, well in my opinion anyway

 

Don't worry about it. I found the answer and that was the important thing