...

View Full Version : A few CSS questions (margins, opacity)



globex
05-13-2007, 08:09 AM
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.

Arbitrator
05-13-2007, 10:18 AM
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.


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.


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.

_Aerospace_Eng_
05-13-2007, 10:28 AM
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

globex
05-13-2007, 10:16 PM
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.

croatiankid
05-13-2007, 10:26 PM
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

koyama
05-14-2007, 04:20 AM
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:


#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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum