Extending Logo into Sidebox

27 Sep 2008, 17:11

#1

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Extending Logo into Sidebox

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

27 Sep 2008, 17:53

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Extending Logo into Sidebox

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

27 Sep 2008, 18:12

#3

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

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

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.

27 Sep 2008, 19:05

#4

clydejones

Deceased

Join Date:: Nov 2005
Posts:: 7,017
Plugin Contributions:: 12

Re: Extending Logo into Sidebox

Michael V:
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*/
}

27 Sep 2008, 21:10

#5

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

clydejones:
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

27 Sep 2008, 21:22

#6

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

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).

27 Sep 2008, 21:29

#7

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Extending Logo into Sidebox

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%;
	}

27 Sep 2008, 21:31

#8

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Extending Logo into Sidebox

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

27 Sep 2008, 21:40

#9

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

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:

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.

29 Sep 2008, 06:54

#10

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

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.

:censored:

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).

29 Sep 2008, 15:02

#11

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Extending Logo into Sidebox

There is in the downloads section an IE only stylesheet module that you might find helpful authored by kuroi...

29 Sep 2008, 18:40

#12

michael_v

New Zenner

Join Date:: Sep 2008
Posts:: 8
Plugin Contributions:: 0

Re: Extending Logo into Sidebox

Update:

The problem with crossing division boundaries seems limited to IE 6. Firfox & IE 7 handle it just fine so I decided, for now, to edit the tpl_header so that if someone shows up browsing in IE 6, the logo will not be called. Eventually (next couple days) I'll make a smaller logo that won't cross the division just for IE 6. There will be a gap above the categories listing that won't be there in Firefox/IE 7 but oh well.

Code in tpl_header.php looks like this:

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') == FALSE) {
?>

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

<?php
}
?>

Using PHP, if HTTP_USER_AGENT (a string that describes what the requesting user is using as a browser) does not have MSIE 6.0 in the string, I'll display the logo. If the string does contain 'MSIE 6.0', the code that calls the logo gets skipped.

After I make the smaller logo, I'll toss in an ELSE statement that calls the smaller logo up for IE 6 users.