Alignment issues.

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi guys,

I am having trouble aligning the nav menu and the 'music player' link.

First go here see whats up http://eclipsebar.info
In Firefox it looks fine but in IE its all wrong.

I have it all in 1 html widget. The menu is in a div and the link is in another.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes

Posted 9 years ago

  • 1
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it all seems fine for me,
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Same for me in: ff, ie, chrome, safari
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Firefox - menu sits on the line.



IE8 - Menu is way above line and 'music player' is further down



You dont see the same thing?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it works the same for me in IE & FF & it looks brilliant :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thats ok then - thanks Alex - im still not happy with the way it looks on my screen. Lee.
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Yes now I see it. On my ie though, the text is big and way about the menu. Where did you get the menu from? Some javascript menu don't work in all browsers depending on the author
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
its CSS - so it shouldnt be a problem.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here's a slight workaround - it keeps everything on one line.. but it still creates a gap on the bottom

Use your two-column widget, your menu without the music player link in the left-hand side, and then put your music link in the right hand column. You'll see that everything stays on one line.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I tried that but it cut the line off at the second column. Not what i was looking for. I wanted to continue the line across the whole page.
(have you tested that? did it not do the same thing for you?)

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I don't have a line.. I must not have copied the whole code... I'm onto something else that may work.. bear with me! =)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
did you add that line?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
its a part of the whole menu code.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hey Duke,

How about a 'if ie' tag? like this:

<!--

<!--[if IE]>
<style type="text/css">

-- add here what you want different in IE --

</style>
<![endif]-->

-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think I got it to work! If Connor's idea doesn't pan out, then let me know and I'll add my little workaround.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ Connor - great idea but the CSS is not controlling the link div. Thanks anyway.

@ Littleus - whats the workaround.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Do what I proposed earlier - two column widget, and put your menu code in the left.

Then add this tweaked code in the right:
<div style="padding-top:7px; text-align:right"><a href="#" onclick="window.open('http://www.eclipsebar.info/music.php'...; title="tool tip">MUSIC PLAYER</a></div>
<div class="ddcolortabsline">&nbsp;</div>

It'll look weird in the site builder, but it should be fine in the preview. If the lines don't match up, adjust the padding-top number.

Lemme know how it goes!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
that will just about do it - thanks Littleus - your a genius.

Maybe you could check on your larger monitor if it looks normal.

Lee.
http://www.eclipsebar.info
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Looks perfect Lee!

Here's the screenshots so that you can see!

In IE7:


In Firefox:


BTW.. in IE7, when you go to click on the music player, it actually opens up in a new window - not a pop-up.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
thanks Littleus - never mind about IE7 - as long as it works in new browsers its all good. Now i have to make the music page.

The owner of the bar wanted site wide music - so i thought this might be a cool way to get that achieved.

Lee.