Extending Logo into Sidebox

[Michael V]

Hi all. I've been looking through the forums and hacking away at the css solving my problems up to this point but ran into something I'm not sure how to fix.

I'm trying to extend my logo from the header into the left sidebox. In Firefox this works fine but in IE it pushes the side/center boxes lower.

The site is http://www.imperialnorton.com

I apologize from now for how the site looks. I've been mostly working on functionality and not so much on cosmetics.

Thanks
Mike

[kobra]

You can try adding a width to your stylesheet #logo entry of say 125px....

Normally, this would be sliced into 2 images and positioned/attached to differing parts of the template

[Michael V]

You can try adding a width to your stylesheet #logo entry of say 125px....

Normally, this would be sliced into 2 images and positioned/attached to differing parts of the template

Just tried adding width with no effect... I thought that I'd have to split the image but got it to do what I wanted by removing the float left and adding text-align left to #logo. Then I double checked through IE and found it didn't work for that platform.

If I have to I guess I'll split the image, it just seems a lot cleaner to leave it in one piece.

[clydejones]

Just tried adding width with no effect... I thought that I'd have to split the image but got it to do what I wanted by removing the float left and adding text-align left to #logo. Then I double checked through IE and found it didn't work for that platform.

If I have to I guess I'll split the image, it just seems a lot cleaner to leave it in one piece.

You might be able to create a "logoBox" just for the logo and then use either absolute or relative positioning within the stylesheet to get the look you're after.

something like this

<div id=logoWrapper">
<div id="logoBox">
your_logo
</div>
</div>

in the stylesheet you have something like this
#logoBox {
position: absolute;/* you could also use relative*/
top: 0; /*adjust this to whatever you need*/
left:0; /* adjust this to whatever you need*/
}

[Michael V]

You might be able to create a "logoBox" just for the logo and then use either absolute or relative positioning within the stylesheet to get the look you're after.

That would probably work, but I'd like to have background images going behind the logo. I made a few quick edit to the page to show what I mean: http://www.imperialnorton.com

I think that if I made the logo it's own division/box, I would just run into the same problem of extending other images/navigation bars into the new box.

Mike

[Michael V]

In addition. I just checked my edits in IE and the discrepancy just got larger. In firefox the navigation bar goes behind the logo, in IE it gets forced below. Both properly show the background image going behind the logo. And again IE won't let the logo slide into the sidebox where in firefox in does (which is how I want it).

[kobra]

Can do alot with the css for this...

Try removing the current navMainWrapper entry and making it it's own entry with the following:

#navMainWrapper {
        float: right;
        width: 596px;
        margin: 0em 1.4em 0em 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.jpg);
	font-weight: bold;
	color: #ffffff;
        height: 1%;
	}

[kobra]

And again IE won't let the logo slide into the sidebox where in firefox in does (which is how I want it).

Suggestion: Do all of your design work in FF and disregard IE until complete or you will be chasing your tail forever.

When done, then address the IE "quirks" mode issues - once and only once

[Michael V]

Can do alot with the css for this...

Try removing the current navMainWrapper entry and making it it's own entry with the following:

Sorry, I should have mentioned that I liked how the navigation bar went behind the logo and that's how I wanted it to show up in IE as well.

I'm just trying to figure out if there is a fix for getting an image to overlap a division in IE (I'm checking it using IE 6) or if I'll have to cut the logo in two and call half from the header and half from the left column/sidebox.

I'd prefer if the image could overlap so that I can make minor layout changes to the page without having to cut the logo in two every time. If I can't, then I'll wait until I have everything else with the page set up how I want and edit the logo once.

Thanks for all the help & suggestions.

[Michael V]

Well, I have come to the conclusion that I hate IE.

If I use the position: absolute, I can get things to look right but if I change the resolution or modify the size of the IE window, things quickly start to go wrong.

If I use the position: relative, IE doesn't allow the image to cross across divisions.

If I try to cut the image into pieces and call them from the different divisions, IE looks like it tosses in a 1 pixel line along the division boundary which ruins the image.



Any suggestions? The only thing I can think of is to take a 'print screen' snapshot of the page perfectly set up, cut out the section from the bottom of my logo up and turn it into my background (minus the text of course). The only thing stopping me right now is that it would be a pretty sloppy solution (IMO).