Im having a nightmare. Basically im creatin a template for joomla CMS and i got the CSS working fine but when it came to using the template online everything around the menu system on the page went pear shaped.
Joomla inserted the following code into the dive tag using php
- World Map
however this results in the following.
firstly theres a 30 pixel gap above the menu div tag
the menu moves to the right by about 50 pixels
in internet explorer there is no gap above the menu div tag but the menu has still moved 50 pixels to the right. You can tel because its overlapping the right hand side part of the image behind it.
i played around with coding and found the problem. essentially instead of the code thats inserted above you insert the exact same thing without the <ul>, <ul/> markings at the start and end and it solves the problem
can anyone explain why taking the <ul><ul/> markings out fixes the problem and also i need it to look
like the last link. how wold i go about doing this.
cheers for any help
If taking out the <ul> tags
If taking out the <ul> tags removes the gaps, doesn't it stand to reason that there is default padding/margins on the UL element?
Try zeroing them and see what happens.
quite a basic fix silly not to have thought of that.
It's not silly, unless
It's not silly, unless you're aware that browsers have default padding set it takes a while to figure it out!
For future reference, now you know If there's a problem with mysterious gaps appearing, zero the margins first.