Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Advertisements

Stryker250

Posted 15 July 2007 - 03:00 PM

Stryker250

Member

Member

16 posts

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

Posted 15 July 2007 - 05:48 PM

T110MAS

Member

Topic Starter

Member

26 posts

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?

Spider-Man

Posted 15 July 2007 - 06:08 PM

Spider-Man

Member

Member

167 posts

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]

Spider-Man

Posted 15 July 2007 - 06:10 PM

Spider-Man

Member

Member

167 posts

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:)

Stryker250

Posted 16 July 2007 - 02:08 AM

Stryker250

Member

Member

16 posts

@ 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.

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

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: