IE7 Rounded Corners and Other Issues
I am working on the website http://www.pressedpennies.com.au/. The site has a Joomla backend and I stripped a template down a fair bit to get the current look. The main issues I am having are in IE7, the page displays fine in Firefox2 and 3 and Safari etc.
The first issue is with the bottom rounded corners. They don't display like they do in Firefox, it just seems to have one rounded corner and some extra bit of space and the right rounded corner is in the wrong spot.
Also the top banner seems to have a small white space between it and the top menus. It doesn't happen in Firefox, I'm not sure what is causing it.
Hopefully someone will know how to fix these small issues. I'm fairly new to CSS etc and I'm not sure what is causing the issues.
Thanks,
Quintin
The first issue is with the bottom rounded corners. They don't display like they do in Firefox, it just seems to have one rounded corner and some extra bit of space and the right rounded corner is in the wrong spot.
Also the top banner seems to have a small white space between it and the top menus. It doesn't happen in Firefox, I'm not sure what is causing it.
Hopefully someone will know how to fix these small issues. I'm fairly new to CSS etc and I'm not sure what is causing the issues.
Thanks,
Quintin
scrathcyboy
consider writing a test for IE7, and if it is the browser, do a different CSS rendering. Many people have to do this for the fine tuning that you are talking about. I think the white (5px?) border around the box is messing up the rendering X-browser, consider removing it?
ASKER
I'm not sure where to start with an IE7 test. Any ideas? I'm not sure what is actually causing the problem, so I don't know what to eliminate. I think that 5px padding is going around the whole page not the specific content, well that's what it looks like with Firebug in Firefox. That space must have something to do with the way IE7 interprets the code. But I'm not sure what section of the code is causing that problem.
I tried to remove the 5px padding, but that just made the content below the heading pressedpennieslogo image go flush to the sides of the page. But the gap still remained with the heading image and the menu.
I tried to remove the 5px padding, but that just made the content below the heading pressedpennieslogo image go flush to the sides of the page. But the gap still remained with the heading image and the menu.
"The site has a Joomla backend and I stripped a template down a fair bit to get the current look. "
It is almost certainly the Joomla CSS code that is causing the problem -- this is the biggest problem with these CMSs -- their CSS becomes very quirky cross browser. Can you not get rid of all the Joomla CSS code by simply deleting those references to the canned joomla style sheets? that is where the problem will be.
It is almost certainly the Joomla CSS code that is causing the problem -- this is the biggest problem with these CMSs -- their CSS becomes very quirky cross browser. Can you not get rid of all the Joomla CSS code by simply deleting those references to the canned joomla style sheets? that is where the problem will be.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
Thanks.
Overflow fixed the rounded corners problem mostly. Still seems to be doing a few weird things, but looks a lot better. I think next time I will just make a template from scratch so I have more control over things etc.
Overflow fixed the rounded corners problem mostly. Still seems to be doing a few weird things, but looks a lot better. I think next time I will just make a template from scratch so I have more control over things etc.