Hey. So i've been workin on my site recently. I changed the menus, and i got all that stuff worked out, but now my title at the top is all screwy.

The logo used to match up with the background, so it would be clickable and be able to direct you back to the news page, but now its slightly off. I've messed around with the padding settings but i can't quite seem to get it to match up again.

Any help making the logo and the background image match up would be awsome. Or, if you know of a workaround (aka how to make the background clickable somehow, or something), that would be awsome too.

Thanks.
-Large

P.S. The site is hc.dkpsystem.com Oo
P.S.S. Yes i know the splash image is a huge file, been meaning to get around to making it smaller, but im lazy Oo.

Edit wrong tag Oo

<table width="100%" height="180" style="Margin: 0px; Padding: 0px" cellpadding="0" border="0" cellspacing=0>
<tr valign="top">
<td align="center" colspan="3">
<table width="100%" style="Margin: -5x; Padding: -5px" cellpadding="0" border="0" cellspacing=0>
<tr valign="top">
<td valign="top" align="left">
<a href="http://hc.dkpsystem.com/news.php"><img border=0 src="settings/hc/files/logo.jpg" alt="highcouncil"></a>
</td>
<td valign="top" align="right" style="Padding-Top: 10px; font-size: 12pt">
<div name=calendiv>Loading Calendar</div><script>loadcal('','')</script>
</td>
<td valign="top" align="left" style="Padding-Top: 10px; font-size: 12pt">
<table cellpadding=0 cellspacing=1><tr><td>Nothing Scheduled</td></tr></table> </td>
</tr>
</table>
</td>
</tr>
</table>



make the above look like this


<table width="100%" height="180" style="position: relative; top: 0px; Margin: 0px; Padding: 0px" cellpadding="0" border="0" cellspacing=0>
<tr valign="top">
<td align="center" colspan="3">
<table width="100%" style="Margin: -5x; Padding: -5px" cellpadding="0" border="0" cellspacing=0>
<tr valign="top">
<td valign="top" align="left">
<a href="http://hc.dkpsystem.com/news.php"><img border=0 src="settings/hc/files/logo.jpg" alt="highcouncil"></a>
</td>
<td valign="top" align="right" style="Padding-Top: 10px; font-size: 12pt">
<div name=calendiv>Loading Calendar</div><script>loadcal('','')</script>
</td>
<td valign="top" align="left" style="Padding-Top: 10px; font-size: 12pt">
<table cellpadding=0 cellspacing=1><tr><td>Nothing Scheduled</td></tr></table> </td>
</tr>
</table>
</td>
</tr>
</table>

Actually, i had to adjust the inner table to absolute, and leave the outer alone. Oo. (Though i did try putting both to absolute after what you told me to do didn't work, i ended up with everything on top of each other. >.<) Though, it was nice that I finally figured out why I had 2 tables in each other =D.

Thanks for leading me in the right direction though, i had completley forgoten about the style="positioning: absolute/relative;" tags.

So i lied.

the site works great on my brower (firefox, w/e the latest version is)... but in IE6 and Safari 2.0.6 it doesn't show up correctly. Its still about 10px to low and to far right. I'm assuming this has something to do with the the fact that the two browsers don't recognize the "style="positoning: absolute;" tag. (Do they? idk).

I haven't been able to test it on IE7 yet. If someone wouldn't mind testing that id apprecaite it (IE is the bane of my existence, i <3 my mac).

Anyways, does anyone know any workaround for this other than manualy editing the image to make it work, or make a certain area of random placement clickable or something?

Thanks.
-Large

Btw. I cleaned up the code a bunch.

Heres what is left.

<table width="100%" cellpadding="0" border="0" cellspacing=0>
<tr valign="top">
<td valign="top">
<a href="http://hc.dkpsystem.com/news.php">
<img border=0 src="settings/hc/files/logo.jpg" alt="High Council - Home" style="position: absolute; top: 0px; left: 0px;">
</a>
</td>
<td valign="top" align="right" style="Padding-Top: 10px; font-size: 12pt">
<!-- System:Calendar -->
</td>
<td valign="top" align="left" style="Padding-Top: 10px; font-size: 12pt">
<!-- System:Next5Events -->
</td>
</tr>
</table>

Still only works on firefox, and not safari 2.0.6

I'm using IE7 on a PC, and it LOOKS great to me... though it's different than what it was when you started this thread, so I'm no longer sure what it's supposed to look like versus what it does. I don't have Firefox on my laptop (which I'm currently on)... just my home PC, so I can't check it against that to see the difference, but as far as I see, your Header/Logo looks fantastic.

Sorry about the messup of my original help. I didn't have time to actually check my work, just made what I thought was the right assumption about the end result. Glad you got it figured out though.

As for making it look the same in Firefox, Safari and IE... I'd say this:

IE for the MAC is trash. I honestly must say, that of all the programs MS has ever written, it stands side-by-side with WindowsME as the biggest waste of time MS has ever spent. (And I actually really like a lot of MS's stuff). Therefore, I'd say it isn't worth even supporting.

Firefox, both on the PC and MAC is incredibly consistant as far as code support is concerned. If it looks right on the MAC, it probably looks identical on FF for the PC.

Safari W3C compatibility is sketchy to say the least. It does very well for about 75% of the W3C standard, and interprets the rest in a truely funky way.

Pre-IE7, you'll without a doubt have a different experience from FF to IE, as IE interprets placing and borders differently than FF does. As a result, many things (almost everything) are off by 2+ pixels, and depending on which browser you use as your standard will represent which one it looks right on. Even IE7 still makes some interpretations of Positioning, borders, Padding and Margins differently than FF in some areas.

Really with IE, you'll find that it mostly revolves around how it treats borders. Do you INCLUDE them in the equation, or are they set apart? That's the end result that makes things different.

FYI, I can't tell you which is right. W3C is not super specific on that fact, and MS took one way. Most other browsers went the other route, undoubtably to be different than MS. IE has more of the browser market than all the other browsers put together, but then almost ALL the other browsers fall on the other side of the fence on this issue. Which comes first, the chicken or the egg, right?

Anyway, the end result is that you must have separate stylesheets if you want it to look identical in IE AND FF. You can try for Safari too, but there it's mostly about luck.

How would i go about doing that? What tag do i need to put in the <Link rel=... blah blah blah> thing to make it link to seperate style sheets depending on the browser?

Also, i noticed what the problem was by acident today (and you mentioned it before too). Firefox treats the logo (the image with the text not the background), the calendar (including all its little numbers), and the next 5 events table as all separte elements, and you can highlight each one. Safari however, treats them as one giant table. So i think if i had a positioning tag to the row tag, i might be able to get it work.

Still have to see what it looks like on IE6/7. Apparently my guildies are having some major troubles with it Oo.

Edit: Oh yeah, its correct on firefox now, though if you use safari (prolly ie6/7) the logo is slightly right and low of where its supposed to be. Also, the background is supposed to fade down and some of the page elements are supposed to cover it up (kinda like the dkpsystem.com page)