2Q- IE img overlay / unknown source of line break

Starcraftmazter posted this at 00:12 — 18th October 2005.

They have: 6 posts

Joined: Mar 2005

2 Things.

First of all, I'm redesigning my website (most of the redesigning will be in the php code, not in terms of layout or looks), and I have ran into 2 minor dilemas.

Temp site address is here:
http://istsonline.com/ists4/

1. Why is there a line break between 'Main' heading the 'nav here..' in the top left box. I cannot get the source of it, I suspect it's because the image is meant to be there (the curved corners one) but is relatively placed above.

What would be an efficient way to solve this problem? Make another div around the 'nav here pal' lines, and place it relatively top:-15px; perhaps??

2. More complex I would assume.

Looking at the site in IE7 / IE6 as opposed to any half decent browser (firefox, opera, ect) the curved corver pic stuffs up on the right side.

Now, putting the image as the background of the div isn't what I want, sinse it needs to cover the borders.

Please tell me there's a way to fix this one!!!

The source is all in one place, thanks to PHP's include statements, and the stylesheet is here:
http://istsonline.com/ists4/ists.css

Thanks.

Megan posted this at 02:02 — 18th October 2005.

She has: 11,421 posts

Joined: Jun 1999

Try doing it like this:

<div class="navi">
   
    <h2 class="cnav">Main</h2>  --- background image applied here

     <div class="navbox"> --- border applied here to sides and bottom
        Nav here pal.<br />
        Nav here pal.<br />
        Nav here pal.<br />
        Nav here pal.<br />
</div>

</div>

'I think that should work. I did this before for a mock-up but decided not to use the border so I don't have the exact code anymore.

Okay, so I had to make sure it worked:

http://www.meganjack.com/samples/starcraftmazter.html

Semantic-ized some of the mark-up too