SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy max-width and IE?

    I'm having problems with max-width and IE and wondering if there is an alternative or a way to fix it. While Firefox does it just fine (I dont have Netscape to test yet, I'll have to install it), IE ignores it completely.

    Here is the link to the css
    http://dreamlab.cc/imagevault/layout.css
    and here is the page with the example.

    As a disclaimer I need to add that my code ist most likely a mess and full of things I shouldn't have dared. So, anyone who reads it, please excuse the chaos.

    Thanks in advance for any hints into the right direction, I'm forever grateful

    Oh and don't mind the babble on the webpage, thats so I dont forget what I want to do
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting width to 600px as well.
    Code:
    #content {
    	position: relative; 
    	margin-top: 55px;
    	margin-right: 20px;
    	margin-left:205px;  
    	margin-bottom:20px;
            width: 600px;
    	max-width: 600px;
    	z-index: 1;
    	background-color: #A5A4A0;
    	border: dashed #969289 1px;
    }
    #footer {
    	position: relative;
    	padding: 10px;
    	margin-top: -50px;
    	margin-left: 210px; 
    	margin-right: 20px;
            width: 600px;
    	max-width: 600px;
    	text-align: center;
    }

  3. #3
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works to fix the width, but it doesnt allow me to keep a margin of 20px to the left. It fixes (as in.. erm.. you know, set it) the width, which wasnt what I wanted to do.

    But should that be the only possible solution then I'll have to deal with it

    Thanks
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  4. #4
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid I still don't understand what you meant. The page looks similar to me in IE & FireFox. Then again, I tested with IE 6.

    Also, I really like the design (But not the border of the spotlight-box :/)

  5. #5
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for the help
    Well, see, my problem is the following:

    When you look at it with Firefox everything is OK
    Expand yer browser and the width of the center content will stay at 600px.
    Narrow your browser window and the center box will always stay 20px from the right window border. Of course that means it will end up smaller than the actual 600px, but thats why its supposed to be "max" width.

    In IE however (I have IE 6 too) the center box will expand with the browser and not stop at the 600px. However, it also stays away from the right border by 20px.

    Also, I really like the design (But not the border of the spotlight-box :/)
    Thanks for that!
    I'm thinking about removing the border around the spotlight box. Right now its just there so I see how its positioned. Maybe I'll find a better color for it, thats another thing I have in mind.
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, got it! I did some reseach and found a way (thanks to http://www.svendtofte.com/code/max_width_in_ie/). The trick is to use IE's expression-property. Yeah, it'll give you a validation error because it's not a standard, but it works. Here's how to do it:
    Code:
    #content {
    	position: relative; 
    	margin-top: 55px;
    	margin-right: 20px;
    	margin-left:205px;  
    	margin-bottom:20px;
    	width: expression(document.body.clientWidth > 860 ? "600px": "auto"); /* You might need to change 860 to something else if you modify the site a lot, for now it seems to be the correct value. */
    	max-width: 600px;
    	z-index: 1;
    	background-color: #A5A4A0;
    	border: dashed #969289 1px;
    }
    #footer {
    	position: relative;
    	padding: 10px;
    	margin-top: -50px;
    	margin-left: 210px; 
    	margin-right: 20px;
    	width: expression(document.body.clientWidth > 860 ? "600px": "auto");
    	max-width: 600px;
    	text-align: center;
    }

  7. #7
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sorccu
    Ok, got it! I did some reseach and found a way (thanks to http://www.svendtofte.com/code/max_width_in_ie/). The trick is to use IE's expression-property. Yeah, it'll give you a validation error because it's not a standard, but it works.
    Sweet ! Thanks a whole lot, it works like a charm !

    That was the last problem obvious to me which I had to get rid of. Now on to making this design a template for Mambo.. *gulps*

    Thank you again

    Oh yeah and btw, I changed the borders :P

    So long then.
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •