10 replies to this topic

[curthard89]

ok, so heres my site

http://www.ultimate-tutorials.co.uk

if u look in the content boxes there r large gaps above and below the content, which i cant seem to get rid off, and i dont know whats causing it, so feel free to view the source and look at my css, any help would be appreciated.

[Demonslay]

Simply add margin:0 10px; and they should go away. Not tried it because I just noticed something even larger...
In IE your middle content is just... plain out screwed over. I'm not sure how to fix that, but I don't think absolute positioning is a smart idea with using a liquid layout. In IE on any resolution it changes drastically, shifting from the left to the right and all over. Also in IE your small content box headers are messed up.
You should really debug for IE since like, ~80%+ of the world (Stupidly) uses IE, which could take a toll on your visitors.

[pirateXcore]

I can guarantee you it's nowhere near 80%
But I would suggest you make many changes in IE too cause when I open it in there it is all screwed up. FF just has margin errors.
The biggest error I found is when I roll over any link it moves some other part of the page...how the hell did you manage to do that?
I'd suggest you get multiple browsers and debug for all of them. FireFox & Internet Explorer are definite musts...and then if it isn't too much for your pc then get Opera or NetScape...You have a lot of errors....and that is why I like using tables instead of all CSS for layouts.

[curthard89]

add margin:0 10px; to what class? lol,

[pirateXcore]

The ones used to make the columns. so it looks like...left right right2...etc

[curthard89]

i dont think u understand what i mean mate, the content inside the boxes, so it says 'tutorials' as the header, then the cats inside, but it has the gaps inbetween the header and the content, and below the content between content and bottom of box

[pirateXcore]

You want no space for the different boxes right?
so open your style sheet and add margin:0 10px; to the classes that make the boxes that hold your content. I'm not sure what you called them....but I think that the one called left makes the boxes that are on the left right? and the ones called right make the ones on the right, right? If so add it to those, and also add it to whatever it is for the center one and it'll get rid of the gaps.

[curthard89]

omg, thank you lol, works now, thanks alot, any chance of any help for sorting our IE for me now lol, i didnt write the CSS, greycobra did it for me.

[pirateXcore]

I don't really see anything wrong with the code. :\
The only thing I can think of is that IE has troubles recognizing something like padding or top....i'm not sure though.
You'll have to either ask greycobra or wait for some one else. It's the oddest thing ever though.

[curthard89]

lol yer, i see what u mean about it moving other bits on page, roll over a header and it moves the content below it lol

[Demonslay]

I'll tell you that Greycobra didn't do a good job on the CSS. Sure it looks nice in FF, but any real web developer would do atleast IE tests.
IE always has padding/margin errors, it's messed up, and I get similar things all the time. Exept in your case you have a ton of bugs I've never seen before, lol. I wouldn't use absolute positioning with a liquid layout. I would either use relative positioning, or just go with margins as they are so much simpler, and you'll never get overlayed areas.
Try taking out the absolute positions and just use margins on the left, right, and right2 classes. A simple margin:0 5px; should do fine on each. Adjust the '5' if you want them a little farther apart.