Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A few CSS questions (margins, opacity)

    I'm running into a couple of issues with my design (can be viewed at: http://www.globexdesigns.com/clients/index.php)

    1. How do I have 2 'div' blocks next to each other in a way that they can both be adjustable in height relatively aka. when one stretches - the other one follows. I tried placing them both into a another div and setting them to 100% height, but it doesn't seem to work.

    2. When I have 2 'div' blocks next to each other, IE seems to display different margin amounts than Firefox. (try looking at my page in IE and then in FF).

    3. I've got a div with 50% opacity on it. However, I want the text in that div to be displayed at 100% opacity. For some reason it's not working. If I put the text into a separate div and set that div to 100% opacity, it still uses the outer div's 50% opacity style.

    Thanks for you help in advance.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by globex View Post
    1. How do I have 2 'div' blocks next to each other in a way that they can both be adjustable in height relatively aka. when one stretches - the other one follows. I tried placing them both into a another div and setting them to 100% height, but it doesn't seem to work.
    You do this using the declarations display: table-cell and display: table to simulate a table. Internet Explorer supports neither of them.

    As an alternative, you can emulate the appearance of equal‐height columns by using a vertically repeating background image or literally force them to equal heights by using JavaScript. I think that the former technique is referred to as “faux columns” if you want to do a Web search.

    Quote Originally Posted by globex View Post
    2. When I have 2 'div' blocks next to each other, IE seems to display different margin amounts than Firefox. (try looking at my page in IE and then in FF).
    I’ll let someone else address this one. Looking at it in Internet Explorer 7, most of the footer content is also concealed.

    Quote Originally Posted by globex View Post
    3. I've got a div with 50% opacity on it. However, I want the text in that div to be displayed at 100% opacity. For some reason it's not working. If I put the text into a separate div and set that div to 100% opacity, it still uses the outer div's 50% opacity style.
    You can’t apply opacity changes to an element but then not have them apply to that element’s content. You’ll need to adjust the opacity of the background and/or content directly via an image editor.

    For interest, the CSS3 Color Module has a solution to this for solid color backgrounds through the use of RGBA and HSLA values; I believe that they’ll see their first debut on Windows via Firefox 3.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Oh boy here we go again. Another web design company who had bad code (don't offer the service if you can't do it properly). Your bad coding is part of your problem. Fix your errors. http://validator.w3.org
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Arbitrator:

    Thanks. Setting the display to table-cell helped. Although there were still issues with IE reading different heights (due to padding and margins, I'm assuming), but I think I got it now.

    As for the opacity, I found a fix. I just had to set the div that I wanted to be inside to position: absolute with 100% opacity. I knew it was possible, because I've seen tons of sites doing this.

    _Aerospace_Eng_:

    Aerospace, even professionals still run into problems sometimes. That's how we learn and how we get better. Clearly the site I'm working on is a wip and will have problems, that's why I'm here - for some help. I'm not sure how a person with a "Helpful Member Award" can get away with such comments. The XHTML code flaws I had - had nothing to do with the issues at hand.

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Professionals usually don't go looking for free help, especially for something they're paid for (like a client). I think most people would call this unprofessional

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by globex View Post
    2. When I have 2 'div' blocks next to each other, IE seems to display different margin amounts than Firefox. (try looking at my page in IE and then in FF).
    Hmm... I'm not sure where to look? Maybe you are referring to your login form. Here the difference in rendering is caused by IE not supporting the padding property for the table element. This is true also for the latest version 7 of IE.

    As a side issue, I wouldn't use this method for centering the page:
    Code:
    #Wrapper {	
    	height: 455px;
    	left: 50%;
    	margin-left: -310px;
    	margin-top: -205px;
    	overflow: visible;
    	padding: 0;
    	position: absolute;
    	top: 50%;
    	width: 620px;
    }
    The problem with this method comes when the window is shrinked to sizes smaller than #Wrapper. You will find that content is clipped by the viewport. Only the center of #Wrapper can be seen. No scrollbars will be provided to see the entire content area of #Wrapper. This is bad accessibility. The users only option is to disable styles on the page.


  •  

    Posting Permissions

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