PDA

View Full Version : Problems displaying webpage


Jane
02-19-2011, 09:04 AM
We have a website that i update in dreamweaver. When one of the people in my office viewed a couple of webpages (using IE8) they appeared incorrectly. The menu bar at the top had gone onto 2 lines and some of the text shows on top of each other.

we displayed these webpage on other computers and they appeared fine.

I have attached a screenshot. (i have had to crop it to get the correct file size for uploading but hopefully have shown enough information so you can see what is happening)

I appreciate if someone could advise me as to what is the problem

Many thanks
Jane

gentleone
02-19-2011, 12:59 PM
Hi Jane,

Better to give us a link to the page, because with a screenshot we can only guess what could cause this.

Jane
02-19-2011, 04:00 PM
the link to the page is
http://www.michael-smith-engineers.co.uk/products/zenith-pumps/zenith-gear-pumps.htm

i just viewed it on my pc and it works fine. as said previously, on my colleagues computer all the text is jumbled every time and also in the table. Also the menu bar appears over two lines

Many thanks for replying
Jane

johnMoss
02-19-2011, 04:39 PM
Hi Jane,
Site works fine for me also... On the computer in question, what version of IE is being used?

gentleone
02-19-2011, 04:44 PM
In the CSS from your navigation you have this:

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 32.13mm;
float: left;
border-top-style: none;
border-right-style: ridge;
border-bottom-style: none;
border-left-style: none;
}


You see there a width of 32.12mm. First of all mm doesn't exist in HTML/CSS. It's either px, em or %.

If you re-size your browser window to a smaller viewport, you'll see that the last menu button will drop a line below... this is also what your colleague sees. He/she uses probably a smaller screen resolution then you do or my guess is he/she uses the text zoom browser function.

If you change the width of the above CSS rule to a normal value (px, em or %... I suggest px) and a bit less width then you have now, that would solve the issue of your last menu button.

This text zoom function in the browser from your colleague is probably also causing the text in the tables jumping.

Jane
02-20-2011, 09:10 AM
Many thanks for your reply. Please can you tell where i need to go to amend this

Many thanks
Jane

Corrosive
02-20-2011, 10:08 AM
In your stylesheet for the spry menu bar; http://www.michael-smith-engineers.co.uk/SpryAssets/SpryMenuBarHorizontal.css

Jane
02-20-2011, 10:15 AM
thank you for the link, that is clever.

i have amended the width to px and as suggested a bit less width so put in 30px but when i look at the drop down menu, they have all gone really small.

what have i done wrong ?

Corrosive
02-20-2011, 10:58 AM
They look fine to me. What browser (and version) / OS are you using?

Jane
02-20-2011, 01:22 PM
oh sorry, meant to say i havent loaded it up yet but as soon as changed the css sheet and looked at one of the pages, all the menu options went to about half the size so i guess as i am changing from mm to px does that mean i need a different dimension. how does mm and px relate to each other

many thanks

Jane

Ricky55
02-20-2011, 04:42 PM
They dont relate forget the mm. Bizarre measuring screen elements in mm don't try inches or grams either. (sorry couldn't resist that)

Just try to rework based on the info provided above. Does your text need sizing if so use font-size again in px or em.

johnMoss
02-20-2011, 04:52 PM
You see there a width of 32.12mm. First of all mm doesn't exist in HTML/CSS. It's either px, em or %.


Perhaps you meant to put em. em is a measure based on a user's default browser settings. I would recommend [as you don't understand the differences] to go with pixels. There are roughly 72 pixels per inch to answer your question, and when size is defined in pixels, it will render exactly the same in all browsers.
Simply set to pixels & play with the pixel size until you're happy with how it looks.

Jane
02-21-2011, 08:01 AM
thank you everyone for your help, really appreciate this.

i have now amended to px, uploaded and looks fine

one small question thou is that there is a tiny gap on the right and if i increase the px by 1 it then returns over 2 lines. is there anything i can do to get rid of this space

Its not the end of the world if i cant but just thought i would ask as you been very helpful so far

Kind regards
Jane

johnMoss
02-21-2011, 12:04 PM
There are several answers to this question, all of which are based on the current structure of your code. If we can see what you're doing, it makes that a lot easier. Do you have it up on the net? If not post your code & css here...

Jane
02-25-2011, 08:08 AM
hi, thanks for your replythe website is www.michael-smith-engineers.co.ukdo u need any other info ?

johnMoss
02-25-2011, 01:30 PM
go into your header css and add the following:

margin-right: 0px;

Jane
02-28-2011, 09:37 AM
thanks for your reply. i have added that line in my css but it doesnt make any difference. there is still a little gap on the right hand side.

Jane

gentleone
02-28-2011, 11:15 AM
Hi Jane,

I took a better look to the source of your website then before and that gap is there because you have placed the menu in a table that has a 100% width, so what you see now looks like a small gap on your screen but the gap is wider on monitors with a higher screen resolution and on smaller screen resolutions the last menu button will still drop a line below.

I see also that you've place the spry menu in a (deprecated) div align="center" in the hope to center the menu on the screen, but as you see this doesn't work. If you want to center the menu then you'll have to center it in the CSS of the spry menu.

To be honest you will ran in more troubles if you keep on building layouts with tables. CSS based layouts have also it's cross browser issues, but far less then table based layouts and most of them are well known bugs which are simple to solve.