Hey guys, I'm having an annoying problem that i cant seem to resolve fully..
http://www.plecpicker.com
I'm coding my site myself, relearning as i go, the site is made of a 24 column 960px grid.
I've added a bar going down the right of the page, got it lined up and loading right with push n pull and custom values...
Then looked at it in IE, and it has gaps...
If i make the div class a little longer IE looks fine, but it then pushes gaps into the main body in FF !
Resizing images seems to do next to nothing, i just cant see why.
here is a piece of affected code:
.Fragment{ background-image:url('images/frag2.gif'); width:85px ; background-repeat:repeat-y; background-size:contain;}
function Text_Bar($data){ echo "
<div class='grid_24 '>
<div class='grid_2 alpha'> </div>
<div class='grid_20 MainFont MainTextBacking' style='margin-right: 0px'><center>" . $data . "</center></div>
<div class='grid_2 omega Fragment' style='margin-left: 0px; width: 80px; ' >
<div class='grid_2 '> </div><div class='grid_2 '> </div><div class='grid_2 '> </div><div class='grid_2 '> </div>
<div class='grid_2 '> </div><div class='grid_2 '> </div><div class='grid_2 '> </div>
</div>
</div>
<div class='clear'></div>";}
Hope i have supplied enough data, and that someone knows what i need to change.
Thanks in advance guys.
Edit
All i can think of now is some check to see what browser is in use, then display it accordingly.... Reckon this is necessary?