Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

CSS IE Issue
 
katiek648
Member
 
Total Posts:  33
Joined:  2008-04-10
 

I’m hoping that one of you CSS geniuses could help me out. On my left side bar I have set up images in place of the <h4> tags. Everything looks great in Firefox, but it looks like there is a layer issue in IE6.

http://shop.ode1.deasil.com/

Can anybody help me with this?

/* Base Mini */
.base-mini {width:234px;}
.base-mini .head {     height:53px;  }
.base-mini .head h4 {    }
.base-mini .head h4 .count { text-transform:nonecolor:#2f2f2f; white-space:nowrap; font-weight:normal; font-size:.95em;}
.base-mini h5 { font-size:1em}
.base-mini .content, .base-mini ol {margin-top:-15px}
.base-mini ol li { padding:7px 4px 7px 8pxposition:relative}
.base-mini ol li.odd { background:#f4f3f3; }
.base-mini ol li.even { background:#fafafa;}

.mini-newsletter h4 { background-image:url(../images/newsletter-signup.gif);width:234px;height:53px}
.mini-newsletter .input-text { margin-bottom:3px}

.side-col .box { margin-bottom:1.3em}
.side-col .content { padding:5px 10px}
.side-col .head { text-align:left}
.side-col h2, .side-col h3, .side-col h4, .side-col h5 { float:none}
.side-col h3 { font-size:1.05emtext-transform:uppercase}
.side-col h4 { color:#e65505; text-transform:uppercase; }
.side-col .actions {
    padding
:4px 0;
    
font-size:.95em;
    
text-align:right;
    
}
.side-col .actions a, .side-col .actions a:hover { text-decoration:underline}
 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

Well the first thing that I notice is the margin’s and padding which IE 5.5->6.0 have problems with.  Or rather their box model interprets differently then say Firefox or Opera’s.  If you are using Firefox for development an quick way to see if this is the case is to use the Web Developer Toolbar extension and under the CSS tab select use Border Box Model and see if it shifts things around.  There are two ways (maybe more) that I know of to deal with this.  One is to use some sort of Box Model hack such as Tantrik (sp?) hack, among others, or to use the addIECss() function in Magento for the page to load a different style sheet with different width’s to accommodate for how IE interprets the box model.

-Adam

EDIT: As an additional note, I try my best to avoid having to deal with the box model at all by using positioning to get thing’s where I want them but that is not always possible if you need specific styling and it doesn’t make sense to put multiple nested div’s.  Good luck!

 
Magento Community Magento Community
Magento Community
Magento Community
 
katiek648
Member
 
Total Posts:  33
Joined:  2008-04-10
 

Wow, thanks for the heads up on the Firefox Extension...looks like it will make my life a whole lot easier smile

As for the CSS, I’ll have to do some more tinkering.

 
Magento Community Magento Community
Magento Community
Magento Community
 
katiek648
Member
 
Total Posts:  33
Joined:  2008-04-10
 

I installed the Firefox extension and the .middle shifted to the left. Does that mean I have to fix the .middle tag ?? I’m unsure where I need to be applying the Box Model Hack.

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

-Adam

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top