IE, FF and Chrome

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Hi
With the help of Sanja I have inserted a custom menu on this page

http://www.leathersolutions.org/

When viewed with IE and FF it looks perfect but Sanja has informed me that when viewed with Chrome (which I don't have) the menu is not the same width as the banner leaving a gap on the right hand side. I know that it sometimes impossible to design a website which is compliant with every browser but if anyone has a fix for this I would be grateful.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi David

I am using Chrome right now. I don't think that there is a fix because if you change the width of the menu, it will change on all browsers, and then it will be good in Chrome but bad in the rest. I took a screen shot of what the site looks like in each browser:

Google Chrome



Safari



Firefox



As you can see, this problem is also occurring on Safari. This is because it is built on web kit. Google Chrome and Safari are both built on web kit, so this problem is happening on web kit browsers. I'll try to find a fix for this. I might write a JavaScript code to solve this problem if there are no CSS fixes.

Nathan
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Hey Nathan....What about making the background behind the menu a transparent png file with a drop shadow behind the text?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for the suggestion! I could also use a web kit CSS3 feature to make it move over. I'll try a few things. I'll try the PNG image first, it seems the easiest! :)
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi David,

Sanja is certainly one of our most educated support specialists when it comes to coding! I would have to agree with her on this one. I am confident that our community will share any ideas or suggestions they may have for you as Nathan has. (Thanks, Nathan!)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem! :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay guys,

I think I have fixed it, you will need to change the following:

#sddm {
width: 860px;
height: 30px;
margin: 0px;
margin-left: -1px;
padding-left: 0px;
padding-right:1px;
background-image:url('resources/leather%20square.jpg')
}

#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 13px Verdana;
}

#sddm li a{
height: 25px;
display: block;
margin: 0 0px 0 0;
border-left: 1px #FFF solid;
padding: 5px 19px 0px 18px;
color: #EBE2B6;
text-align: center;
text-decoration: none
}

#sddm li a:hover{
background: #000000
}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FF0033;
border: 1px solid #000000
}

#sddm div a{
height: 15px;
position: relative;
display: block;
margin: 0;
padding: 5px 2px 5px 2px;
width: auto;
white-space: nowrap;
text-align: center;
text-decoration: none;
background-image:url('resources/leather%20square.jpg');
color: #EBE2B6;font: 10px Verdana
}

#sddm div a:hover{
background: #000000;
color: #EBE2B6
}

This code basically adds a background image to the entire area instead of the seperate images for the different menu links, it then adds a Width for the element and adds a left border to give that white spacing appearance.

You will also need to change the code for the Links button to follows:

Change it so that it reads as follows: (Without the <!--- and ---> bits)

<!---

<li><a href="http://www.leathersolutions.org/conta..." onmouseover="mopen('m2')" onmouseout="mclosetime()">Contact Us</a>
<div style="width: 116px; visibility: hidden; " id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.leathersolutions.org/links..." target="_self">Links</a>
</div>
</li>

--->

Kind Regards,

Andi

I have tested in Chrome and works fine, should work good in others too, I am willing to test for you once these changes have been made to at least the homepage of the website concerned. This was all done in the Google Chrome Dev/Tools section.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Folks
Thanks for the replies, Andi I have implemented your changes on my test page

http://www.leathersolutions.org/test.php

If I'm honest it doesn't look as good as the other version where each tab is the same width.
I'm also concerned that in firefox, Nathans screen shot of the original menu is showing 'The Guestbook' as a return when I'm viewing it as one line also with firefox.

Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi David,

I shall edit my code so that the tabs are the same size. The reason the Guestbook tab wa showing like that is because of the width and Firefox rendering the font slightly differently. Finding the right tab size will be crucial in fixing this.

I shall get to work on it now.

Kind Regards,

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Here is the code that should be changed for the Contact Us link: (Without the <!--- and --->)

<!---

<li><a href="http://www.leathersolutions.org/conta..." onmouseover="mopen('m2')" onmouseout="mclosetime()">Contact Us</a>
<div style="width: 110px; visibility: hidden; " id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.leathersolutions.org/links..." target="_self">Links</a>
</div>
</li>

--->

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
And here is the CSS:

#sddm {
width: 860px;
height: 30px;
margin: 0px;
margin-left: -1px;
padding-left: 0px;
padding-right:1px;
background-image:url('resources/leather%20square.jpg')
}

#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 13px Verdana;
}

#sddm li a{
height: 22px;
width: 106px;
display: block;
margin: 0 0px 0 0;
border-left: 1px #FFF solid;
padding: 8px 0px 0px 0px;
color: #EBE2B6;
text-align: center;
text-decoration: none
}

#sddm li a:hover{
background: #000000
}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FF0033;
border: 1px solid #000000
}

#sddm div a{
height: 15px;
position: relative;
display: block;
margin: 0;
padding: 5px 2px 5px 2px;
width: auto;
white-space: nowrap;
text-align: center;
text-decoration: none;
background-image:url('resources/leather%20square.jpg');
color: #EBE2B6;font: 10px Verdana
}

#sddm div a:hover{
background: #000000;
color: #EBE2B6
}

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
The changes are as follows:

1. All tabs are set to 106px wide with a greater top margin so that the text appears centralised.

2. The Contact Us drop down has been set to 110px so that it meets the edge of the bar and looks neater

The tabs under the Shop tab are not set to the same width as the others because the text is too long inside of these cells.

Hope this helps,

Andi
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Andi
First let me thank you for your help with this. I have implemented your revised code on the test page and have tweaked it slightly. I've viewed it in FF and IE and both left and right edges of the menu bar line up perfectly with the banner.
Please could you check in chrome and let me know if my fumblings have upset your revised code, I'll copy the code below so you can refer to what I've changed if required.
I have one other question, I tried to lose 1px on the left hand side of the two drop downs so both sides line up with the tab above but I couldn't figure it out, if you can think of something please let me know.

The shop tab

<!---
<li><a href="http://www.leathersolutions.org/leath..." onmouseover="mopen('m1')" onmouseout="mclosetime()">Shop</a>
<div style="width: 105px; visibility: hidden;" id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.leathersolutions.org/appli..." target="_self">Application Details</a>
<a href="http://www.leathersolutions.org/terms..." target="_self">Terms & Conditions</a>
</div>
</li>
--->

The CSS

#sddm {
width: 860px;
height: 27px;
margin: 0px;
margin-left: -1px;
padding-left: 0px;
padding-right:1px;
background-image:url('resources/leather%20square.jpg')
}

#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px Verdana;
}

#sddm li a{
height: 22px;
width: 106px;
display: block;
margin: 0 0px 0 0;
border-left: 1px #EBE2B6 solid;
padding: 5px 0px 0px 0px;
color: #EBE2B6;
text-align: center;
text-decoration: none
}

#sddm li a:hover{
background: #000000
}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FF0033;
border: 1px solid #000000
}

#sddm div a{
height: 15px;
position: relative;
display: block;
margin: 0;
border-left: 1px #000000 solid;
padding: 5px 2px 5px 2px;
width: auto;
white-space: nowrap;
text-align: center;
text-decoration: none;
background-image:url('resources/leather%20square.jpg');
color: #EBE2B6;font: 10px Verdana
}

#sddm div a:hover{
background: #000000;
color: #EBE2B6
}

Thanks
David
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Looks great in Chrome! Try www.crossbrowsertesting.co.uk to test in all browsers known to man (or woman).

I shall look at the code for the drop down menu's later as I have some work to do beforehand.

Kind Regards,
Andi
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Thanks Andi, the crossbrowsertesting site is not up and running yet
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
*.com not .co.uk sorry.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Andi for your fantastic help with this!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello all,

Thanks Sanja :) Really appreciate it.

David,

If you change the following code for the Shop Tab: (except <!--- and --->)

<!---

<li><a href="http://www.leathersolutions.org/leath..." onmouseover="mopen('m1')" onmouseout="mclosetime()">Shop</a>
<div style="width: 107px; visibility: hidden; " id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.leathersolutions.org/appli..." target="_self">Application Details</a>
<a href="http://www.leathersolutions.org/terms..." target="_self">Terms & Conditions</a>
</div>
</li>

--->

Basically made the width 107px. Probably easiest to change just that variable.

Now time for the Contact Us Tab: (Except the <!--- and --->)

<!---

<li><a href="http://www.leathersolutions.org/conta..." onmouseover="mopen('m2')" onmouseout="mclosetime()">Contact Us</a>
<div style="width: 112px; visibility: hidden; " id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.leathersolutions.org/links..." target="_self">Links</a>
</div>
</li>

--->

Basically made the width 112px.

Now time for the change in the CSS. Remove the border attributes for the :

#sddm div a
#sddm div

This will make it work perfectly for you.

Kind Regards,

Andi
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Thanks Andi that's perfect, thanks again for all your help and expertise.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You are more than welcome...

I am not sure about my Expertise though... more of a series of lucky guesses!

Have fun building your site,

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone. I am not getting notification emails again. :( I think my email got in the bounce list on Get Satisfaction's side. I had no clue you guys were replying! I haven't got any notifiable for a while again. Is there anyway any Yola admin can fix this or is this only on Get Satisfaction's side?

Thanks,
Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Nathan,

It would be best to take this up with Get Satisfication. I'm sure that they can sort this out!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok, I'll post this to their forum.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Andi
I've noticed I still have a 1px coloured border on the left hand side of the two drop downs, they are red on this page for clarification

http://www.leathersolutions.org/links...

I thought by removing the border attributes from the #sddm div a and the #sddm div this would have removed the border from the drop downs, if you have a fix for this I would be most grateful, again!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Yes the reason for those is because I noticed that you had gaps like that on your old design. The problem was that this new nav overlapped part so it looked wierd. It was a design feature - it differentiated the different links.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
They were also coloured white so that they blend into the page background.