CSS Nav Bar Breaking on Widescreen

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Nav Bar Breaking on Widescreen

nav bar breaking on widescreen

gnarielle

3:10 pm on Nov 24, 2014 (gmt 0)

I'm added in a new tab('Loyalty') in the nav bar on a project.

The page works fine on multiple standard sized screens, but when the client tries to view it on their widescreen/double monitor, the code breaks and the 'Contact' tab moves to the next line. Haven't been able to figure out what the exact problem is since I can't manage to recreate the same problem on my screen.

Any help ? Let me know if I need to provide any of the original code.

Thanks !

[edited by: not2easy at 3:20 pm (utc) on Nov 24, 2014]
[edit reason] Snipped URL per TOS [/edit]

Planet13

3:33 pm on Nov 24, 2014 (gmt 0)

Please provide the original code, but with the URLs examplified so they don't list the URL of the actual site.

not2easy

3:40 pm on Nov 24, 2014 (gmt 0)

Hi gnarielle and welcome to the forums. Yes, we would need to see the code in question to be of any assistance. We don't need an entire page of either the css or html but the html for the block element that contains the issue and any lines of css that are used by that part of the page would get this going.

It helps to know the doctype your page uses and any inherited css that would be expected to control the width for the element we're looking at.

I needed to remove your link because we don't diagnose a site specific problem but look for a solution to the issue in general. The Forums try to give help in a way that will be useful for other people who run into the same kind of problem too. You can check the Charter: [webmasterworld.com...] for the basics.

gnarielle

3:41 pm on Nov 24, 2014 (gmt 0)

Sure, let me know if this helps. Thank you !

<div class="nav">
<ul>
<li><a href="/about/" class="t01" onmouseover="soundManager.play('m01')">About Us</a></li>
<li><a href="/menu/" class="t02" onmouseover="soundManager.play('m01')">Menu / Nutrition</a></li>
<li><a href="/locations/" class="t03" onmouseover="soundManager.play('m01')">Locations / Order Online</a></li>
<li><a href="/catering/" class="t04" onmouseover="soundManager.play('m01')">Catering</a></li>
<li><a href="/news/" class="t05" onmouseover="soundManager.play('m01')">Press</a></li>
<li><a href="http://eepurl.com/7KtQ5" class="t09" onmouseover="soundManager.play('m01')" target="_blank">Loyalty</a></li>
<li><a href="/careers/" class="t08" onmouseover="soundManager.play('m01')">Careers</a></li>
<li class="right"><a href="/contact/" class="t06" onmouseover="soundManager.play('m01')">Contact Us</a></li>
</ul>
<div class="clear"></div>

CSS:

DIV.nav {
position: absolute;
top: 140px;
left: 32px;
width:960px;
}

DIV.nav ul {
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
}

DIV.nav li {
position: relative;
float:left;
margin-right: 40px;
}
DIV.nav li.right {
margin-right: 0px;
}

DIV.nav li a {
position: relative;
color: #949384;
text-decoration: none;
font-size: 14px;
font-weight: normal;
display: block;
float: left;
white-space: nowrap;
height: 34px;
overflow: hidden;
}

not2easy

3:59 pm on Nov 24, 2014 (gmt 0)

Are both of you viewing this using the same browser/platform setup? What is the doctype for the html?

gnarielle

4:05 pm on Nov 24, 2014 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The client has viewed it on both Firefox and Chrome and run into the problem. I have been viewing it on Firefox, Chrome, and Safari and have not run into the problem. I believe they are running a Windows, I am on a Mac. Their screen as I am told is wide screen monitor, mine is a standard screen, and I have viewed it/had other people viewing it from different computers as well without having a problem, as well as viewing it on a mobile device with no problems. Thus why I am thinking it has something to do with their screen size, but not sure where in the code the problem would be.

I apologize if I'm not giving the correct information to help everyone help me out, I'm new here but thanks so much for replying !

not2easy

4:12 pm on Nov 24, 2014 (gmt 0)

Thus why I am thinking it has something to do with their screen size

Quite possibly correct in that, people add their own settings that can change a developer's best intentions.

lucy24

5:12 pm on Nov 24, 2014 (gmt 0)

width:960px;

Does each page have a "viewport" meta? I'm thinking something anomalous about how pixels are counted.

not2easy

5:29 pm on Nov 24, 2014 (gmt 0)

If there is a viewport setting with this, id could definitely be the culprit. Viewing it at all default settings in 3 browsers I am not seeing it or anything that would cause that. If you do have a viewport setting in place you will want to use responsive measurements and not fixed positioning. It is also possible that your client is not viewing using default browser settings, they may have zoom settings because of the screen resolution.

gnarielle

5:41 pm on Nov 24, 2014 (gmt 0)

No, there re no viewport settings being used as far as I have checked. I've literally tried everything and the client keeps telling me it's not being fixed. I am really suspecting that is has something to do with their browser settings..

not2easy

9:02 pm on Nov 24, 2014 (gmt 0)

I think you are right that they are not using default settings. Unless the project involves changing things over to responsive design, I don't know a way to alter appearance based on screen width. I am betting that viewing at default settings on an extra wide monitor would not be very pleasant without adjusting settings.

You could use css media queries to select different settings for wider screens. This is commonly done for responsive design, but it doesn't work well with fixed positioning and pixels. You can get more information here: [developers.google.com...] but those are not just a few minor css edits.

gnarielle

9:28 pm on Nov 24, 2014 (gmt 0)

Thanks everyone for the responses. After speaking to the client, finally figured out that their view settings were altering how the website was showing. Walked them through it and was able to fix the problem. Thanks !