PDA

View Full Version : nav bar menu displays differently on different computer


adgal
06-14-2011, 10:42 PM
Hi,
I'm relatively new to Dreamweaver, but have designed and produced a few sites. In the nav bar I have created, the last two menu items (philosophy & contacts) do not appear on my client's browser but I can see them in mine. www.lischwecounseling.com
Since it all looks fine on my 4 computers, 3 Macs + Windows, I have had to go back to the client to test the site repeatedly. Would like to find a solution soon since this has been embarrassing! Thank you!

johnMoss
06-14-2011, 11:40 PM
Off topic, but shoot down to line 239 & thereabouts & fix your break tags. They should all look like <br /> instead of <br>...

I tested the site all the way down to IE 5.5 & it works every step of the way so don't feel bad. But what exactly is happening? Is the menu shoved over, or just those two text fields don't display i.e. everything is in it's proper place?

DWcourse
06-15-2011, 12:08 AM
Your client apparently has the text size in his browser set larger than normal. With larger type you navigation menu wraps to a second line which is hidden behind the "helping you find the way forward" banner. If you look close you are probably also losing some text in the left column on his machine.

It's a design issue that is at least partly caused by using absolutely positioned elements with set heights in your layout.

adgal
06-15-2011, 12:41 AM
Thanks very much for your input. Menus are shoved over to the right--not in their proper places. I will fix the <br/> tags also.

Sounds like absolute positioning is not a good way to go? I started in Illustrator and made slices out of my design. I thought it would be easier if I used math to create a puzzle. Do you have a better suggestion?

Corrosive
06-15-2011, 07:06 AM
Do you have a better suggestion?

Yep, don't :)

Learn how to pull a page together from scratch using page flow, margins and padding to position your elements. Illustrator is for creating images and not writing code... that's what a web designer is for.

adgal
06-15-2011, 02:22 PM
Makes sense I guess, except I am the web designer and code writer. On another note, changing the text size in IE worked! Thank you so much for the tip! One more problem the client is having: Footer on the bottom is breaking into 2 lines. When I change the size on my end, it gets smaller in Dreamweaver, but doesn't change when uploaded. Any thoughts?

johnMoss
06-15-2011, 02:24 PM
Have him refresh his page?

adgal
06-15-2011, 04:38 PM
Will you please check into one more issue for me? After reviewing the site, I realize I didn't have the menu items colored according to what page the user is on, i.e., when user is on "services" color should be purple, etc. In an attempt to correct the issue, now I have a white rectangle at the end of the menu bar. Philosophy and Contact are still okay because I haven't made any changes yet. When I compare the codes from the good nav bar to the bad one, they appear to be identical?? Any input is greatly appreciated.

adgal
06-15-2011, 04:39 PM
Sorry, forgot to include URL: http://lischwecounseling.com/

johnMoss
06-15-2011, 04:50 PM
Did refresh solve the other issue?

johnMoss
06-15-2011, 05:00 PM
Go into your nav css and reset your overflow from auto to hidden...

adgal
06-15-2011, 08:09 PM
On client's computer, apparently not. I thought after he changed his text viewing size it would address the footer also? I changed the text size of the footer so it wouldnt break. I dont like changing my design to suit these fickle browsers!
Revision to overflow tag worked like a charm! I only included that because someone else suggested it might fix the nav bar problem. I would have never thought to change this. Thank you!

johnMoss
06-15-2011, 08:13 PM
Well, be sure & check for any other gripes that may come up beacuse of that fix... Jim is the master of this game. One thing is certain though, absolute positioning is always a tad risky; use only when cornered sort of thing... So let me get this straight, he refreshed the browser and still you have this footer issue?

johnMoss
06-15-2011, 08:14 PM
And in furtherance you still see the problem when testing on your browser?

adgal
06-15-2011, 08:17 PM
Yes. Matter of fact, I just received an email from client that the footer is still breaking even after I changed footer font size from 13 pt to 12 pt. Text currently occupies only 7/8 of the width of my wrapper in Dreamweaver. Really at a loss here??

adgal
06-15-2011, 08:19 PM
Footer does not break on my browser. Does it on yours: www.lischwecounseling.com

johnMoss
06-15-2011, 08:21 PM
Not in ie, ff, opera, & safari; nor in ie versions down to 6.

adgal
06-15-2011, 08:23 PM
Does it make sense to increase the div tag width on the footer only so the text has more room?

johnMoss
06-15-2011, 08:24 PM
You say it's breaking in yours. What is your resolution setting?

johnMoss
06-15-2011, 08:25 PM
Does it make sense to increase the div tag width on the footer only so the text has more room?
What exactly is happening? Is it being pushed over on your screen? Mine shows it centered.

adgal
06-15-2011, 08:25 PM
No, not breaking on my browser. Resolution setting for my monitor?

adgal
06-15-2011, 08:26 PM
Footer address text is centered on my browser. It is the client who has reported the text breaking.

DWcourse
06-15-2011, 08:27 PM
I dont like changing my design to suit these fickle browsers!

But if you don't, then you're not designing for the web but only for your computer ;>)

johnMoss
06-15-2011, 08:31 PM
I can't help but suspect the overuse of absolute is at the crux of this. I see Jim's looking into it, what say you sir?

adgal
06-15-2011, 08:33 PM
Should i change to relative for the footer??

DWcourse
06-15-2011, 08:50 PM
I've attached an image of what I see when I zoom text only. There is no quick and easy way to fix these issues. You're going to need to start over and avoid using absolute positioning. DW's built in 2 Col with Header and Footer layout might be a good starting point for you. Designing a web page isn't like designing for print.

adgal
06-15-2011, 09:04 PM
Thanks for the input.

johnMoss
06-16-2011, 12:02 AM
Ok, a few things:

1) Be sure to go in and validate what you're doing; you have missing alts, minor stuff here & there...
2) Don't forget to finish your page link color settings
3) This is by no means finished, but it's a good headstart, it's much easier to tweak things inside DW. The following changes to your css will get you started on better use of the flow. And get rid of the middle column in your html, I deleted it from your css already.


#Table_01 {
left:150px;
top:75px;
width:760px;
height:540px;
}
#shadow {
background-image: url(Images/dropshad.jpg);
background-repeat: repeat-y;
width: 800px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#wrapper {
position:relative;
top:75px;
width:759px;
height:auto;
margin-left: auto;
margin-right: auto;
}
#logo_ {
left:0px;
top:0px;
width:140px;
height:136px;
background-color: #CCC;
}
#Lischwe-HomeSLICES-02_ {
left:141px;
top:0px;
width:619px;
height:51px;
background-color: #CCC;
}
#logo003_ {
left:0px;
top:91px;
width:140px;
height:44px;
}
#nav-area_ {
left:140px;
top:92px;
width:620px;
height:44px;
background-color: #FFF;
background: #CCC;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
vertical-align: middle;
text-indent: 20px;
color: #306;
overflow:hidden;
}
h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
color: #000;
text-align: right;
line-height: 24px;
padding-right: 4px;
}
h5 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 20px;
color: #000;
text-align: right;
font-weight: normal;
padding-right: 4px;
}
#flash_ {
left:0px;
top:135px;
width:758px;
height:49px;
float:right;
}
#left-column_ {
width:206px;
height:336px;
margin-top:1px;
text-align:right;
background-color: #FFF;
float: left;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
}

#right-column_ {
width:484px;
height:336px;
text-align:right;
background-color: #FFF;
margin-left: 241px;
}
#footer {
position:relative;
width:760px;
height:20px;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
background-color: #CCC;
line-height: 20px;
clear:both;
}
body {
margin-left: 100px;
background-color: #CCC;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #333;
}
a:active {
text-decoration: none;
color: #FFF;
}

-->
#FlashID {visibility:hidden}

adgal
06-16-2011, 01:17 PM
Thank you for taking the time to comb over the site. I figured since all is well on mine and the client's side, I was good to go but your comments make me realize I have much to learn! I'm a little afraid to fix something that "ain't broke". For example, why delete middle column? This is where my vertical rule is inserted.

johnMoss
06-16-2011, 02:44 PM
As the div contained no data or object, the left & right column can go next to each other. I didn't see a need for it. That said though, if all is well, cool beans :)