Help for Newbie with alignment of divs across all browers
I'm used to coding in HTML but I've just created a new website on WordPress (I've attempted to make my own theme!!) and am having a little alignment issue with the CSS across different browsers.
It views perfectly on FireFox on the Mac, but when viewed in IE on Windows the main content box and the sidebar box overlap in the middle. On Firefox for Windows the boxes are miles apart, and on an OS device they majorly overlap. Isn't there something else I can do to make it look at least remotely similar across all browsers?
How very strange! Okay I'll try giving percentages a go and see what happens! Thanks TylerB!
Also, can you see on the screengrab you took that below the top menu bar and left aligned there is a transparent box that has a slight border to it? This only displays in IE and not in FireFox and I cannot work out what it is to get rid of it It then seems to prevent selection of the items at the bottom of the longer dropdown items from the menu.
Do you have any idea what this is and how I can remove it please?
Ok I've managed to remove the weird header and have sorted some of the alignment issues I was having but am now trying to get to grips with using percentages instead of padding so that I don't have the overlapping issues in some versions of IE and on OS devices.
I've been doing a lot of googling and just wanted to check I'm on the right wavelength here:
To have two floating boxes as I do currently I will need to set up 5 columns in my page. Columns 1, 3 an 5 just containing empty space or a transparent gif or something similar and columns 2 and 4 containing my content. Would that be correct or is there a far simpler way that I'm missing?