- This topic has 7 replies, 2 voices, and was last updated 10 years, 5 months ago by
.
-
Posts
-
I have a problem with the Optimal theme “Home Feature Section” CSS. The area is fine using Firefox, Safari, Chrome, IE9, but in IE7&8 the section does not align properly. The site is http://cardio2.icmhostingdsm.com
Please advise on appropriate CSS changes needed to correct this issue.
Thanks,
Mike
Unfortunately I only have Mac computers and do not have windows, or older versions of IE. I can access sites using an IE Emulator, but I don’t see the issue.
Could you post a screenshot of what it looks like?
Your system wouldn’t allow me to post a screenshot. The link below will take you to the image.
http://cardio2.icmhostingdsm.com/css-error/
Thanks,
Mike
This is just a guess (since I don’t have IE) but try changing the “float: left” to “float: right” for – “.home-feature-section” currently on line 727 in your style.css file.
It appears to improve the horizontal alignment, but not vertical. See result at: http://cardio2.icmhostingdsm.com/css-error-2/
I believe I have it working now. Just need some minor adjustments. I assigned a width of 1090px to .home-feature-wrap
Ok, sounds good.
Its possible it could have just been a width issue…maybe IE was displaying the widgets too wide for that section. The width of the theme is actually 960px.
If you have any other issues, just let me know.
Wes,
It’s not perfect, but if I modify CSS to make it perfect in IE7&8, the current browsers will not provide accurate view. You may not run across this in the future, but I wanted to provide the final CSS in case someone else runs into the issue. If you’re interested, you can see the corrected page at: ttp://cardio2.icmhostingdsm.com/error-corrected
Still have to work out the footer, but that shouldn’t be a problem.
/* Home Feature Section
———————————————————— */.home-feature-wrap {
background: url(images/border-img-x_blu.png) repeat-x scroll center top transparent;
clear:both;
overflow: hidden;
padding: 30px 0;
width: 1090px;
}.home-feature-sidebar {
//font-size: 14px;
//float: left;
// line-height: 22px;
//margin: 0;
//padding-right: 30px;
//width: 220px;float: left;
margin: 0 30px 0 0;
width: 320px;
}.home-feature-sidebar h4 {
color: #333;
font-family: ‘Oswald’,arial,sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 34px;
text-transform: none;
}.home-feature-sidebar p {
margin: 0 0 15px;
}.home-feature-section {
//background: url(images/border-img.png) repeat-y scroll left center transparent;
float: left;
font-size: 14px;
line-height: 22px;
//padding-left: 40px;
width: 670px;
}.home-feature-section p {
margin: 0 0 15px;
}.home-feature-1 {
float: left;
margin: 0 30px 0 0;
width: 320px;
}.home-feature-2 {
float: right;
margin: 0;
width: 320px;
}.home-feature-1 h4,
.home-feature-2 h4 {
color: #333333;
font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0 0 10px;
padding: 0;
}.home-feature-1 .widget,
.home-feature-2 .widget {
margin: 0 0 30px;
}
- The topic ‘Home Feature Section CSS’ is closed to new replies.