Great in IE7, wierd lines in FF

Dudes,

Ok I decided to go for the multiple style sheets to display depending on which browser.

I built the page so it worked fine in IE7 (possibly a mistake) but in FF there are some wierd lines which I cant seem to fix.

I have included the CSS, for you to laugh at (i'm still newish), in the head tag

http://www.hobao-racing.com/products..._hyper8pro.php

Can anyone help?

You have an extra closing </div> here
</script><img src="../../img/header_right.jpg" /></div></div>

You also have an extra closing </div> below the footer.jpg

Code: Select all

<div id="product_footer"><img src="footer.jpg" width="710" /></div>
</div>
</div>
</div>

Actually if you eliminate those two closing div's you get rid of the next space
Same with the last break

Code: Select all

<div id="main">
<div id="gallery">
<script type="text/javascript">
var so = new SWFObject("hyper8pro.swf", "movie2", "700", "380", "8", "#FFFFFF");
so.write("gallery");
</script></div>
</div>
</div>

Your </div>happy!!

You probably would have found your error if you took the time to validate your site first. Sometimes it solves the problem and sometimes it doesn't but at least you've covered what you *can* fix.

Thanks for the advice.

I managed to remove some of the blank lines at the bottom but I just can't see how to remove the one from the top in FF

http://www.hobao-racing.com/products.../hyper8pro.php

It's most likely obvious but i cant see it.


Also, if you view in IE the menu is slightly differently aligned to FF

I thought a div inside a div would align to it's parent div but it dont seem to.

Any help?

For the menu, IE handles positioning horrible. You can use the star hack to target IE 5 and 6 if nothing else works:

Code: Select all

* html ul#nav li {
    left: 200px;
}

Right then.

Re-jigged the website to work in Firefox first

then

Used the conditional comments to differentiate between IE and other browsers

It even validates in CSS and XHTML as well. Check my bad self.

I spent ages trying to figure out why the strange line kept appearing but couldnt. Strangely enough if i removed a <h> tag from inside a <div> the line vanished. So I just left it out.

Me again

Can some one just tell me why these lines keep appearing. Once I know why I can prevent them but my eyes are going square trying to find out WTF is going on.

http://www.hobao-racing.com/home.php

Looks fine in IE but not FF/Opera

Alright ... I was a tad bored and decided to get you started in the right direction

http://www.freewebs.com/karinne4/

I don't have IE7 here so I'm not sure how buggy it is in that browser but this works fine in FF, Opera and IE6

**** EDIT: Silly me ... I still had the clearing div in there. I added overflow: auto to #content instead. So ... new zip with the changes

Attached Files

hobao.zip (30.9 KB, 36 views)

Hmm ... wondering if this worked! I rarely do these things and I'm wondering if I should stop! Let's hope the OP replies and acknowledges all the work I've put into it

Yes, thanks for your help.I managed to sort my problems in the end, I think I was just being a ejut.It was interesting to see how you approached the layout with your css. Always useful to see another designers perspective.

Karinne the one time you did that for me it was a lifesaver. Not only did it fix the problems I needed solving, it put me on a path to where I know use your basic design style every single time. So it was really worth it for me!!

Thanks Linda!

Cool!

im seeing weird lines in IE6

Attached Images

hgfds.JPG (97.0 KB, 29 views)

When using which link bruno? Mine or his?

That will be my link.

I managed to tie down FF and IE7 but those little lines still appear in IE6.

Thanks to all the help on this forum I know I can use conditional comments to solve the problem.

Well ... if you used the code I gave there are no more weird things happening in weird browsers

yeah it was his i didnt see the link u made. the freewebs one works fine

I'm grateful for the code karinne but i need to learn myself.

then studdy the code man thats somtimes the best way dont just copy and past it write it down yourself.. thats what i do anyway