...

View Full Version : Quirk between IE and FF



boochkn
12-27-2006, 11:53 PM
Hello, I am no expert, but I have dabbled a bit into web code. I have had an annoying problem for quite some time that I would like help with.

My page http://boochkn.com/forums
has a header that appears correctly (or at least as I want it to) in FF but in IE (all ver that I know of) it won't push the top left graphic to the very edge.

Can someone shed light on my problem? Thanks in advance. :thumbsup:

Matt

Arbitrator
12-28-2006, 12:07 AM
Use the correct method and not a table?

CSS:

div {
height: 125px;
min-width: 805px; /* Ensures that images don’t overlap. */
background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
}
a {
display: block;
height: 100%;
background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
}

HTML:

<div>
<a title="Board Home" href="…link that forum won’t allow…"></a>
</div>

kaitco
12-28-2006, 12:12 AM
The page looks identical in FF 2.0.0.1, IE 6 and 7. Maybe you could make a screenshot of where you see the problem...?

boochkn
12-28-2006, 03:42 PM
Sorry, I didn't clarify before..the problem is only after IE windows are bigger than 1248px wide. See Below:

http://boochkn.com/images/boochkn.com_prob1.JPG

http://boochkn.com/images/boochkn.com_prob2.JPG

Arbitrator
12-29-2006, 04:51 AM
I saw the space at 1280×1024 though the space was a bit thinner than that.

Anyway, the solution I suggested should (A) work at any resolution, (B) require less code, and (C) be semantically correct. Thus it should solve your problem. With regards to (B), if you use an external style sheet for this, you can reduce the code used for every single forum page served. With regards to (C), using tables for layout is incorrect especially when CSS can do things much more smoothly, as in this case.

boochkn
01-03-2007, 10:50 PM
Thanks!! I will be trying it today...I guess I never got past html to realize the potential of CSS...will be trying to get more edu on CSS now.

Troy297
01-03-2007, 11:22 PM
Lol - don't invision boards by default use a customizable CSS stylesheet anyways? Just log into the Admin Panel and you can either correct the sites boards stylesheet or go to where you can customize the forums images and then in the header box just add this......


<style type="text/css">
div {
height: 125px;
min-width: 805px; /* Ensures that images don’t overlap. */
background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
}
a {
display: block;
height: 100%;
background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
}
</style>
<div>
<img src="imageurlhere.jpg">
</div>


Think it'll work....?

boochkn
01-03-2007, 11:43 PM
Thanks!! I will be trying it today...I guess I never got past html to realize the potential of CSS...will be trying to get more edu on CSS now.


Wow, not only is that way less code but it's actually simpler once I did it than what I was doing before...I will definitely explore more ways to use CSS for my web pages.

thanks!! :D

Arbitrator
01-03-2007, 11:56 PM
Seems I made a mistake above. If you want to prevent the two images from overlapping at small resolutions, the min-width value above should be 827 pixels, not 805. You may want to just let them overlap though because that seems preferable to the scroll‐bars you’ll get instead; the overlap looks better than the scroll‐bars IMO.

boochkn
01-04-2007, 01:14 AM
Seems I made a mistake above. If you want to prevent the two images from overlapping at small resolutions, the min-width value above should be 827 pixels, not 805. You may want to just let them overlap though because that seems preferable to the scroll‐bars you’ll get instead; the overlap looks better than the scroll‐bars IMO.

Thanks, you are right, the overlap looks fine compared to the scrolling...

boochkn
01-04-2007, 01:24 AM
Lol - don't invision boards by default use a customizable CSS stylesheet anyways? Just log into the Admin Panel and you can either correct the sites boards stylesheet or go to where you can customize the forums images and then in the header box just add this......


<style type="text/css">
div {
height: 125px;
min-width: 805px; /* Ensures that images don’t overlap. */
background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
}
a {
display: block;
height: 100%;
background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
}
</style>
<div>
<img src="imageurlhere.jpg">
</div>


Think it'll work....?


Yeah, I did that...I was able to make the connection between the stylesheet code given and how it would apply in my situation ;) I also named it .titlebarforum instead of div so that all the div tags wouldn't convert.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum