Test this page please

[Schmoopy]

Hi, I have used http://www.browsershots.org to test my site for cross browser / platform capability, but wasn't really sure if it was that accurate and there seemed to be a few bugs, but I want to be sure before I change the code.

The page I want checked is at http://www.bombthehills.com/test

So far I've been able to test it on Windows, at different resolutions and with different browsers and it's all seemed good, but I want someone with a Mac or a Linux to test it out, as in the browsershots results the drop down menu was dropping a line where it shouldn't have been,

Very grateful to anyone who tests out the page for me,

Thanks,

Jack

[bluewalrus]

Yea the calanders (in the menu under the image) is going onto a second line in all of my browsers (safari, firefox, opera, flock) on my mac. Dont know if this was what you were referring to or if it was drawing a border down further than its suppose to or something else.

[Schmoopy]

Yea, that's what I meant, thanks for checking, now I just need a solution to it :S, it just seems weird that it would work on Windows but not on Mac :(.

[bluewalrus]

yea i agree my res is 1260x800 maybe on a larger one it'd be different? I assume you tried that on windows and it didn't mess up though. Did that page show you the error or just tell you there was one? I can send you a screenshot of it if you don't have one, don't really know what the problem is though.

[Schmoopy]

I'm running 1440x900, but I always resize the pages in every browser to try and simulate different resolutions, and I also test it on my brother's PC, which also uses windows, but has a 1024 x 768 screen. It seems completely to do with the OS, and not with the browser for some reason, the only way I imagine I could fix it would be to make the link on the right of the menu, "Calendar" shorter, but this wouldn't look as good on rollover =/.

You know any conditional statements for OSs? lol :p

Hoping someone can shed some light on this issue though,

Also, that screenshot would be most appreciated,

Thanks,

Jack.

[bluewalrus]

http://www.christophermacdonald.net/ss.png

Maybe this don't know if this works just found it on Google.
http://blog.techsaints.com/2007/08/08/how-to-determine-the-operating-system-of-the-client-machine-with-javascript/

[Schmoopy]

Ah thanks, very helpful, just noticed that triangle to the left of "basics" is also slightly out of alignment >.<, I'll see what I can do :p

[bluewalrus]

its really weird though cause on the initial load its all on 1 line but then when it finishes loading it drops down. I'll try and get a screen shot of that for ya

EDIT: http://www.christophermacdonald.net/pre.png

[Schmoopy]

Yea, that's because it does the menu first, then adds in the arrows from the javascript file, so from that I'm pretty sure making it slightly smaller will fix the problem! :D

[bluewalrus]

shrink the font size and then on hover make it back to the size it was might also work too.

[Schmoopy]

Ok, I've updated the page a little bit, making the last link on the right of the menu, "Calendar" slightly smaller in width, post up a screenie or tell me if it works now please,

http://www.bombthehills.com/test

Thanks very much,

Jack.

[Snookerman]

Looks better now, works fine in FF3, IE7 and Opera 9.6. The only thing would be that there is a small space between the calendar button and the edge when marked (about 2-3 px). Just increase the width a bit. The "triangle" also looks fine.

[Schmoopy]

Yea but that's the thing, I know it looks fine in Windows, it's just on Mac I had to reduce the width, or the line breaks, so I thought by reducing the width of the "Calendar" button it would solve the problem, still need to hear from someone who can see it in on a Mac, you got one?

Edit: Also had this issue on Linux, so if anyone can test it on there I would be grateful :)

[bluewalrus]

No go there. Its weird cause it does and did fit before but then jumps done regardless. Maybe there's a default padding on one of the elements and its adding each time? Although never heard of it with an OS usually just some browsers.

[Schmoopy]

Oh well that sucks :(, don't know what I'm supposed to do now =/

[bluewalrus]

try this maybe

#ddtopmenubar ul li{
color:black;
margin:0;
padding:0;
}

[Schmoopy]

Ok, I won't know till you've tested the page, but I've updated the site, see if it works now, thanks for the help so far :)

[bluewalrus]

That had no effect here. If your not using that mat class try pulling that out it doesn't look like its being used anywhere but I didn't go threw all of your sheets.
Try this maybe just to see if it is the sizing or something else.

#ddtopmenubar ul li{
color:black;
font-size: 3px;
}

[Schmoopy]

Ok, updated again, i'm like 90% sure it should be fixed in Mac / Linux, if not... well... WTF?!?!

[bluewalrus]

They're all in there now

[Schmoopy]

Ok, well that's good, now just to make the menu smaller but still make it look good =/

Thanks very much for your help :D

[bluewalrus]

Your last li is way bigger then the rest. Try this:
.end {
width:100px;
}
Right Now:
http://www.christophermacdonald.net/Picture%202.png
Compared with others:
http://www.christophermacdonald.net/Picture%203.png
Can't explain why but i think this will fix it also try pulling out the small font now and hopefully this will solve it.

[Schmoopy]

Yea I know the last link is bigger, I had to make it bigger so it would go to the end if you seem what I mean, otherwise the menu looks weird, If I set the values the same for all the links I can't quite get it exact, that's why I changed the calendar link.

Edit: I will update the site in a couple of minutes, you'll see what I mean then

Edit2: Now updated, but now there's the issue of the orange space on the right =/ So when you roll over it, the calendar isn't making the rest of the right of the menu go black.

[bluewalrus]

OO yea i see it now you get that little sliver if its not the right width.

[bluewalrus]

Which stylesheet are you doing this in? Looks like 2 or 3 more pixels of width.

[bluewalrus]

floating it right might make it look normal cause the little sliver would go on the left and the black would catch your border.

[Schmoopy]

Links to stylesheets here:

http://bombthehills.com/test/ddlevelsfiles/ddlevelsmenu-topbar.css

This is the one with the ".end" class in it

-----------------------------------------------------------------------------

http://bombthehills.com/test/ddlevelsfiles/ddlevelsmenu-base.css

http://bombthehills.com/test/style.css

Hope this helps

Edit: Updated site with the float:right property you mentioned, how does it look?

In Windows this is very noticeable, it's more than just a 1px border, so are you saying it's tiny on Mac?

[bluewalrus]

.mattblackmenu li a.end{
width:77px;
border-right:0;
float:right;
text-align:centered;
}

EDIT:can you screen shot what your seeing and i'll throw mine up as well
Also i changed width a sec ago

[Schmoopy]

Updated, still a noticeable gap in Windows, but if it's fixed in Mac I better find out how to write than conditional statement again :P

Edit: Screenie of Windows version - http://bombthehills.com/test/test.png

[bluewalrus]

Is the end class still in there? Its about 1 less pixel in mac but yea about that.
I don't know what happened but i cant find the end class anymore haha. You could add a border-left:2px #000000 solid; I think that would work on the hover for .end.

[Schmoopy]

The end class is in topbar.css

but it's not just "end" it's:

.mattblackmenu li a.end{}

:p

Edit: Modified the .end:hover to this:



.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
color:#ff9933;
border-left:10px solid #000;
}

Needed 10px left border to work, what does it look like in Mac now?


Edit2: The other links have started moving to the left on rollover :S

Edit3: Me being an idiot, edited the links instead of the end link :P Fixed now...

[bluewalrus]

haha i've been refreshing page 3, just found page 4. let me reload the main page now. The borders over lapping so its freaking out(flickering).

http://www.christophermacdonald.net/Picture%205.png

It's dropping down which is causing the flickering cause then the hover is off and then back on when it goes back up (if that makes sense).

[Schmoopy]

Dang, so I think conditional statement is the way to go then?

[bluewalrus]

hah i guess so. Are you sure the 10pixels is the right amount and its not just being limited in windows but maybe the mac needs the exact amount the border is?

[Schmoopy]

Yea, any shorter and the hover doesn't cover it all, I will try writing that code in a minute, see if i can fix it

[Schmoopy]

Ok, I've written the conditional statement and updated the site, now I just need to know how much of a border I need. For now, I've set it to 7px, tell me how it looks and whether I need to reduce or increase the size.

(Also tell me if it actually works :p)

Thanks,

Jack

[bluewalrus]

needs to be smaller if conditional is working? Like 2 pixels less
Is conditional php or java can you write something like this is a mac or this is windows in each part of it and i'll let you know.

[Schmoopy]

Ok updated again, if it works the background will go red, I will reduce the border a bit more.

[bluewalrus]

yup background is red 1 less pixel should do it

[Schmoopy]

Ok sweet, I'm at college at the moment, I'll update it a bit later when I get home, good to know it works though :)

[olveyphotodesign]

Good Evening,

I was looking at the thread and needed to ask if you thought about changing the padding for the li a attribute? Currently it is set to 20 for left and right. If you changed this to 19 that would shrink your navbar to fit on one line. I've looked at it in Safari 3.1.2 and there is still the two line issue.

The problem is if I remember right the physical width of a pixel on a Mac is slightly larger one on a PC, or there abouts.

When I do a Command + - to shrink the font size, they all fall on one line.

If 20 pixels is too much and will throw off your design, you could do a padding of 6 20 6 9. This would only free up about ten pixels and that should allow your navbar to fit entirely on one line.

[bluewalrus]

what os and browser are you viewin in and is it at default settings? Because we thought we already had it viewing on one line in every browser/os.

[Schmoopy]

Since doing all that I have updated the test page again :P, my brother wanted the page smaller to fit on all resolutions, so we have to restart the process again. The menu bar is now smaller, so tell me, is it still breaking the line? :p

Thanks,

Jack

Edit: Link - http://www.bombthehills.com/test

[bluewalrus]

http://www.bluewalrus.net/Picture%206.png
newest

[Schmoopy]

So is it too big before the rollover? Or does it only go to the next line when you hover?

Edit: Also taken the border-left on rollover away now, still too big?

I've also taken out that hideous red background since I know it works now :p

[bluewalrus]

its on the bottom line the whole time now. But on the right side cause of the float right we added.

[Schmoopy]

Updated, took out the float, added a smaller width to it, work now?

[olveyphotodesign]

what os and browser are you viewin in and is it at default settings? Because we thought we already had it viewing on one line in every browser/os.

Looking at it in OS 10.4.11 with Safari 3.1.2. I reset Safari to defaults.

I hit refresh several times. I'm not at my home computer right now, but when I am I'll look at it in Opera and FF. I will also take some screen shots. The Menu is too long to fit on one line.

Hitting refresh shows me that the Calendar is on the top line until the drop down arrows are loaded on the li's with the rel attribute.

[Schmoopy]

Ok reduced width by 5 pixels, any good now?

[olveyphotodesign]

Navbar stays the same except now on hovering Calendar jumps up onto top line.

[Schmoopy]

Ah forgot to change the default width, and modified the one on rollover, should be fixed now, thanks for your comments.

[olveyphotodesign]

Just looked at the site again and it's all on one line. The only issue I see is that in the hover state there is a 4 or 5 pixel gap between the Glossary li border and black background.

http://www.olveyphotodesign.com/images/gap.png

[Schmoopy]

Ok, I've added a 4px border on hover to the calendar button, hope this works

[olveyphotodesign]

Sorry, I don't see a change. Looking at the code, what will happen if you remove the float: right from the li.end:hover class?

[Schmoopy]

Yea, sorry didn't update the files, silly me :o. Check it now, the float is removed.

[olveyphotodesign]

Gap is now on other side of Calendar li. We are seeing the ul background color. Is there a way to set this li.end width to auto?

Or, Remove the background color attribute from the <ul> style. This will make the ul transparent and the black background will show through. Although this may not work because the block effect could be lost.

[bluewalrus]

Its all on one line on my browser now one sliver. http://www.bluewalrus.net/Picture%207.png

[olveyphotodesign]

Good Evening,

Just checked site on following Mac OS 11.4 browsers Safari 3.1.2, FF 3.0.4, and Opera 9.50 and the sliver is on right side of Calendar <li>. Navbar is on one line.

[Schmoopy]

Ok, updated again with a 2px right border, hopefully this should be one of the last fixes...

Thanks very much for your help guys

[bluewalrus]

http://www.bluewalrus.net/Picture%208.png

hah maybe 1 more pixel i think i've said that 12 times now

[Schmoopy]

Ok added one more pixel lol, this is hilarious :p

[bluewalrus]

Perfect.

[Schmoopy]

YAY! Finally, thanks so much for all your help! :D

[hmsnacker123]

When i clicked on the link, It just says error 404.

[Schmoopy]

Yea, the test site is no longer there :)

[hmsnacker123]

Ahhh :S