Code for the new advert

zoogs

zoogs

New member
I noticed the advertisement just got added in and it was stretching the page horizontally in a weird way.

Here's a quick code fix:

Original:

Code: 
			<table width="525" cellspacing="0" cellpadding="0" border="0">
				<tbody><tr><td>
				<a target="_blank" href="http://www.huskernation.com">
				<img height="80" width="600" src="img/hnbanner.gif" alt="Click to shop at HuskerNation.com"/></a>
				</td>
			</tr></tbody></table>
Modified:

Code: 
				<a href="http://www.huskernation.com" target="_blank">
				<img height="80" width="600" alt="Click to shop at HuskerNation.com" src="img/hnbanner.gif"/></a>
For some reason, the <table> stretched things out and took up more space than it was supposed to, even though the <div> that contained it didn't occupy that space. Not really sure why <table> works this way but that was what I saw from using Firebug in Firefox (hecka useful debugging tool for these things)

 
Last edited by a moderator:
I think that may be a browser-specific issue. In IE 8, the only way I get a horizontal scroll is if I set my screen resolution to 600 x 800. Even then, it doesn't appear to be the banner doing it as it's only 600 px wide.

 
It's still like that in chrome and FF, but in IE it's exactly center as you say.

I *think* what's happening is that the <div> it sits in is getting some interference from the <div> right above it, which has some padding rules applied in CSS. IE and FF handle padding and margins a bit differently, so that may account for the discrepancy. How off center is it in IE? Way out of whack or only slightly?

I suspect this because even without the table, it still doesn't turn out to be "exactly" centered either (not too far off, but again not exactly) If I add a 5px margin or padding to the top of the <div> containing the image, it seems to work fine and be perfectly centered again.

 
Last edited by a moderator:
AR, I poked around in the developer's tools in IE and it seems that this will work for all browsers...

Code: 
<div style="text-align: center; padding-top: 10px">
<a href="http://www.huskernation.com" target=_blank><img style="display: block; margin: 0 auto;" alt="Click to shop at HuskerNation.com" src="img/hnbanner.gif" /></a>
</div>
 
Last edited by a moderator:
Way out of whack. It shows up indented about 30 px from the left margin.

The trouble is that for the CSS, I'll need to set up an entirely separate setting for it. And that means an id tag, etc. When I get a chance, I'll play with it a bit and see if I can do that. But since most users are on IE (even now), leaving it as it is will give us the greatest compatibility.

 
zoogies said:
AR, I poked around in the developer's tools in IE and it seems that this will work for all browsers...

Code: 
<div style="text-align: center; padding-top: 10px">
<a href="http://www.huskernation.com" target=_blank><img style="display: block; margin: 0 auto;" alt="Click to shop at HuskerNation.com" src="img/hnbanner.gif" /></a>
</div>
Click to expand...

Let me test it and see what happens.

 
Outstanding! Thanks, zoogies!

I have browsers going back to IE 4 on several virtual machines. Next time I'm in one, I'll give them a shot and report back.

 
Eric the Red said:
New mods...this is the sh#t i stay out of...like speaking Chinese.
Click to expand...
Then you really want to stay out of THIS THREAD.
laugh.gif


 
Last edited by a moderator:
Back
Top