Log In Sign Up

IE and width & height issues


Forum: Graphic and Web Design

Notices

Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Graphic and Web Design LinkBack Topic Tools Search this Topic Display Modes
  #1  
August 7th, 2009, 07:41 PM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!


This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!


This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.


To resolve this problem, you can use the following code for a box with class="box":


.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}




All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.
__________________
Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast




My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)

Reply With Quote
  #2  
September 23rd, 2009, 10:42 PM
cakelady's Avatar :)
Join Date: Aug 2009
Location: California
Posts: 4,928
I'm definitely going to have to read up on CSS. I have IE, Mozilla, and Chrome browsers, so I can check to see if my sites look okay, but they still look a little different in each one.
Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 04:32 PM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0