[T110MAS]

Hey there, firstly sorry if this post is in the wrong category...this one seemed the best fit to my problem.

Oki, my problem is that on my website (www.tomhargreaves.com) i have inserted a flash file, which i had to make 100% height and width (no scale) in order to accomodate a flash lightbox script.

When i preview this site in my browser (screen res 1280x800) everything is fine.

However, when previewing on my older pc (screen res 800x600) the links at the bottom are 'cut-off' from view, and there is no scrollbar on the right.

I tried previewing in both ie and ff, and the problem is visible in both.

Just wanted to know why there is no scrollbar and how do i add one to my site to appear 'when needed' aka when viewed on low res monitor?

Help would be much appreciated.

Many thanks,

Tom

[Advertisements]

The reason why your site is doing that while viewing it with low resolution monitor is because you have set some (if not all width's equal to a percentage and not a fixed pixel value. When doing this the browser will parse all relative widths (percentage) and resize them according to the browser window size.

For example, if you look at your site in your normal PC, and just resize your browser window to a smaller size. You will notice the changes.

The only fix for this is to set your widths to a fixed value and not work with percentages.

[Stryker250]

The reason why your site is doing that while viewing it with low resolution monitor is because you have set some (if not all width's equal to a percentage and not a fixed pixel value. When doing this the browser will parse all relative widths (percentage) and resize them according to the browser window size.

For example, if you look at your site in your normal PC, and just resize your browser window to a smaller size. You will notice the changes.

The only fix for this is to set your widths to a fixed value and not work with percentages.

[T110MAS]

hey stryker thanks for getting back to me.

i set the 100% width and height of the flash movie by going to 'publish properties' in flash, then selecting 'html' tab. then 'dimensions' to percentage, then changing both height and width to 100, then finally the scale to no scale.

if you check out my site and click on one of the buttons at the bottom you will see why; it activates a lightbox feature, which has an alpha shadow around it.

if i didn't put the flash movie at 100% width and height, the alpha shadow would only stretch to the original size of the flash file.

is there absolutely no other way i can incorporate a scrollbar without changing this?

what about if make it 99%?

is it really not possible to make the flash movie full width and height but have a scrollbar at the side?

cheers,

tom

[Major Payne]

Sorry. Server hung on me.

Ron

Edited by Major Payne, 18 July 2007 - 03:00 PM.

[Major Payne]

Sorry. Server hung on me

Ron

Edited by Major Payne, 18 July 2007 - 03:01 PM.

[Major Payne]

Have no idea about Flash, but does it provide for a styling of {overflow:auto} or {overflow:scroll} or {overflow:visible}? Possibly this is what you need, but have no way to test it for you.

Ron

[Major Payne]

Sorry. Server hung on me.

Ron

Edited by Major Payne, 18 July 2007 - 03:01 PM.

[Major Payne]

Sorry. Server hung on me.

Ron

Edited by Major Payne, 18 July 2007 - 03:01 PM.

[Major Payne]

Have no idea about Flash, but does it provide for a styling of {overflow:auto} or {overflow:scroll} or {overflow:visible}? Possibly this is what you need, but have no way to test it for you.

Ron

[Spider-Man]

Hi Tom.

I recently did a site and found a similar problem to yours. When viewed with a lower resolution, the site menu's would show in two seperate lines, forcing menu's on the right of the page to overlap underneath those on the left of the screen - so all the menu's were completely unusable. This was my solution:

Open 'Paint' - create an image which is XYZ wide, 1px high - make it the colour of your web page background. Save as gif or jpeg, add that to your site -and the width of the image will force IE, Firefox, Netscape and Opera to create a horizontal scrollbar as well as the standard vertical scrollbar.[those are the browsers I have tested this workaround with]

I hope this helps!

[Spider-Man]

Hi Tom.

I recently did a site and found a similar problem to yours. When viewed with a lower resolution, the site menu's would show in two seperate lines, forcing menu's on the right of the page to overlap underneath those on the left of the screen - so all the menu's were completely unusable. This was my solution:

Open 'Paint' - create an image which is XYZ wide, 1px high - make it the colour of your web page background. Save as gif or jpeg, add that to your site -and the width of the image will force IE, Firefox, Netscape and Opera to create a horizontal scrollbar as well as the standard vertical scrollbar.[those are the browsers I have tested this workaround with]

By 'XYZ' width - just keep testing til you get it working, as it depends upon where you want your page borders to be shown using a 1024x768 resolution. If you want the page border almost at the outer edge of the screen, make the iamge around 900 wide. Obviously if your border is narrower than that, then make the image narrower:)

I hope this helps!

[Major Payne]

Sorry. Server hung on me. See I wasn't only one having problem with Reply. LOL. Would be nice to get these extras removed.

Ron

Edited by Major Payne, 18 July 2007 - 03:02 PM.

[Stryker250]

@ Spidey, I doubt that will work with the latest versions of each browser. Because you aresetting the width's to a relative size, you are allowing the browser to resize your page according to the browser size. Where as if you use fixed sizes, the browser is forced to parse those sizes. And if the sizes are bigger than the browser window itself, then shebang...you have scrollbars.

@Tom, if you are talking about your index page (the one with the flash). I have just tested it in FF and in IE (both latest versions) and resizing the browser window has no effect on any links or text. The thing is, the browser cannot resize anything within the flash object itself, because..well...its an object.

When clicking on prints though, I didnotice that when resizing the browser there you have an extra image that runs over your text ontop (the headerof the page). Your images within your main content are get resized accordingly, which I doubt is a pain. Your links at the bottom, however do get cut off. The get moved to the next line.

If you are using divs, set their widths to a fixed value and set their margins (left and right) to auto. That will make sure that their widths stay as is and don't get resized. If you are using tables, set the table width to a fixed width and align the table to center. Thatwill also ensure that nothing gets resized.

[T110MAS]

hey everyone sorry for the late reply...thanks for your feedback on this...i will answer everyone who contributed separately:

Have no idea about Flash, but does it provide for a styling of {overflow:auto} or {overflow:scroll} or {overflow:visible}? Possibly this is what you need, but have no way to test it for you.

Ron

not really sure where i would include this in my index page. the only bit of css i included on my page is to adjust the outer margins to '0'

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

^that is the code i mean.

where would i add the overflow properties in my page? (view my website page source if necessary)

would i need to have the flash file in a div to do that?

Hi Tom.

I recently did a site and found a similar problem to yours. When viewed with a lower resolution, the site menu's would show in two seperate lines, forcing menu's on the right of the page to overlap underneath those on the left of the screen - so all the menu's were completely unusable. This was my solution:

Open 'Paint' - create an image which is XYZ wide, 1px high - make it the colour of your web page background. Save as gif or jpeg, add that to your site -and the width of the image will force IE, Firefox, Netscape and Opera to create a horizontal scrollbar as well as the standard vertical scrollbar.[those are the browsers I have tested this workaround with]

By 'XYZ' width - just keep testing til you get it working, as it depends upon where you want your page borders to be shown using a 1024x768 resolution. If you want the page border almost at the outer edge of the screen, make the iamge around 900 wide. Obviously if your border is narrower than that, then make the image narrower:)

I hope this helps!

when i read this i got excited...thought it would solve my problem.

firstly i created a 650 x 1px transparent gif and placed it below my flash file in the centre of the page. when i previewed it created a vertical scrollbar, but when i resized the browser window, the scrollbar didn't get any more "scrollable"...it just let you scroll 1px more, and cut the rest of the flash file off...

to try to further solve this i created another transparent gif...this time 1 x 600px (vertical).

i placed this one to the side of the flash file, to try to make the vertical scrollbar "more scrollable" when resizing my browser.

however, when i came to preview, the 1 x 600px gif was 'pushed' below the flash file, due to its 100% width.

i then tried other approaches, for example putting the flash file and 1 x 600px gif in a table with separate columns...but again the gif was pushed below the flash.

sooo frustrating!

When clicking on prints though, I didnotice that when resizing the browser there you have an extra image that runs over your text ontop (the headerof the page). Your images within your main content are get resized accordingly, which I doubt is a pain. Your links at the bottom, however do get cut off. The get moved to the next line.

If you are using divs, set their widths to a fixed value and set their margins (left and right) to auto. That will make sure that their widths stay as is and don't get resized. If you are using tables, set the table width to a fixed width and align the table to center. Thatwill also ensure that nothing gets resized.

hey, not fully sure what you mean here...

are you talking about the deviantART page, because when you click on the prints link on my site (tomhargreaves.com) it links to my deviantART prints page in a separate window...this deviantART page is not my website...it is an art community that i am part of that i sell prints on.

do you/anyone have any other suggestions, or is it definite that i can't achieve this scrollbar with 100% width?

just seems a little odd that it is not possible...

if there isn't a way i would be forced to use separate html links at the bottom, which loads a javascript-based lightbox over the top of the flash file in order to display my contents.

i didn't want to resort to this however, because it means losing the 'neat' all flash look, and screws up my email contact form

help would be appreciated.

many thanks,

tom

[Major Payne]

hey everyone sorry for the late reply...thanks for your feedback on this...i will answer everyone who contributed separately:

Have no idea about Flash, but does it provide for a styling of {overflow:auto} or {overflow:scroll} or {overflow:visible}? Possibly this is what you need, but have no way to test it for you.

Ron

not really sure where i would include this in my index page. the only bit of css i included on my page is to adjust the outer margins to '0'

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

^that is the code i mean.

where would i add the overflow properties in my page? (view my website page source if necessary)

would i need to have the flash file in a div to do that?

help would be appreciated. many thanks,

tom

You need to correct the coding errors on your page before you try adjusting your layout. As for setting everything to zero, use the universal selector in CSS:

* { margin: 0; padding: 0; border: 0 }

That will level the field for all browsers. especially IE. The 20 major errors you should correct. Not only does your page get parsed badly by browsers, but SEs are not going to take too kindly to them:

HTML Validator result
----------------------
http://www.tomhargreaves.com/

line 1 - Error: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"
line 1 column 12 - Error: there is no attribute "XMLNS"
line 1 column 52 - Error: there is no attribute "XML:LANG"
line 3 column 73 - Error: character data is not allowed here
line 8 column 29 - Error: required attribute "TYPE" not specified
line 9 column 58 - Error: required attribute "TYPE" not specified
line 26 column 29 - Error: required attribute "TYPE" not specified
line 37 column 167 - Error: there is no attribute "SRC"
line 37 column 186 - Error: there is no attribute "QUALITY"
line 37 column 199 - Error: there is no attribute "SCALE"
line 37 column 217 - Error: there is no attribute "BGCOLOR"
line 37 column 233 - Error: there is no attribute "WIDTH"
line 37 column 247 - Error: there is no attribute "HEIGHT"
line 37 column 259 - Error: there is no attribute "NAME"
line 37 column 272 - Error: there is no attribute "ALIGN"
line 37 column 299 - Error: there is no attribute "ALLOWSCRIPTACCESS"
line 37 column 328 - Error: there is no attribute "ALLOWFULLSCREEN"
line 37 column 341 - Error: there is no attribute "TYPE"
line 37 column 385 - Error: there is no attribute "PLUGINSPAGE"
line 37 column 431 - Error: element "EMBED" undefined
20 errors / 0 warnings

Most of these errors seem to be triggered by the doc type used, which is NONE in your case. LOL

The overflow: auto I thought could be added to your Flash property. I haven't caught up with Flash yet so didn't know. Try adding it to the body styling for the whole page on the CSS.

HTHs,

Ron

Edited by Major Payne, 18 July 2007 - 03:12 PM.