PDA

Click to See Complete Forum and Search --> : why do i get huge space when i use left and right DIV

SZero
02-26-2008, 01:23 PM
hi every1
i use this code for some shades on the left and the right

<div style="background: url(templates/subSilver/banr.gif) repeat-y right top; padding: 0; margin: 0">
<div style="background: url(templates/subSilver/banl.gif) repeat-y left top; padding: 0; margin: 0">

<DIV style="margin-left: 32px; margin-right: 32px; width:100%">
PAGE
</DIV>

it works fine but when i resize the page it shift to the left and i get this huge space on the right, if i remove the left or right shade DIV it works fine, any idea y??
ty..
ray326
02-26-2008, 01:51 PM
Use auto l/r margins and a smaller width.
SZero
02-26-2008, 02:22 PM
details plz..



i tried sth by luck which got to work on IE, i removed float:right, but now on FF the right part doesn't appear..
ray326
02-26-2008, 03:19 PM
style="margin-left: auto; margin-right: auto; width:90%"
SZero
02-26-2008, 03:28 PM
but i got a definite width for the shadow so using % will mess it up..

anyway i managed to make a temp sol, i used JS to get browser type and use diff code (with float left) for FF, now there seem to be another problem, on FF all the items are aligned to the left and it should be centered, don't know y..
ray326
02-26-2008, 04:50 PM
So it'll be funky when I visit, eh?
Centauri
02-26-2008, 06:33 PM
How about a link to this online so we can see what is happening?
SZero
02-26-2008, 11:26 PM
www.bibo4pc.com
Centauri
02-27-2008, 12:00 AM
You have a few errors here including two lots of <head> tags, with one of them overlapping a div.....

This can be done easily without using side divs. First, get rid of the code for the floated right div and the javascript generating the left div. Next, move the wrapper div tag so it comes AFTER the </head> and <body> tags in the html. Now if you use left padding and right margin on the div to centre the content, the left image can be a background to the div, and the right image a background to the body :</head>

<body style="margin:0; background:#F5F9FA url(templates/subSilver/images/banr.gif) right top repeat-y" link=#3F839D vlink=#3F839D alink=#3F839D>

<div style="padding-left: 32px; margin-right: 32px; background: url(templates/subSilver/images/banl.gif) repeat-y">

<TABLE cellpadding=0 style="margin-top: 7px;" style="border-collapse: collapse" bordercolor="#006699" border=1 dir=rtl cellspacing=0 width=100%>
SZero
02-27-2008, 05:23 AM
brilliant idea, ty ;)
SZero
02-27-2008, 05:29 AM
srry 2 bother again but now a new problem appeared in FF, when i resize the page, the right shadow sticks to the right of the page and goes behind the table, and if u scroll to the right u'll just see it's place empty, any idea how 2 solve this?
ty again
Centauri
02-27-2008, 06:54 AM
Setting a minimum width on the body should sort that :<body style="margin:0; background:#F5F9FA url(templates/subSilver/images/banr.gif) right top repeat-y; min-width: 720px;" link=#3F839D vlink=#3F839D alink=#3F839D>
SZero
02-27-2008, 08:47 AM
well now no horizontal scroll bar appears when i resize it, any idea y?

even if there isn't, i'm done with it, those who use FF should use IE..
Centauri
02-27-2008, 09:42 AM
Ths could be a FF bug when using rtl direction, but not sure. You could try removing the dir="rtl" from the html tag, and just apply it to the outer table tags instead - that way the directon shouldn't affect the body or scrollbars.
SZero
02-27-2008, 11:56 AM
it doesn't matter it shows fine full, again ty so much ;)