[Solved] IE7 gone crazy

[guirigales]

Hello,

I seems like only five minutes ago I was here…oh wait I was.

Another problem has arisen. I was just checking my web in IE7 and its horrible. The DIV holding the projects is off.

Heres the css

Code:

/*Portfolio Area*/

#portfolio_outercontainer{
margin: 0 auto;
width: 960px;
position: relative;
clear: both;
padding-bottom: 20px;
}

.portfolio_container{
padding: 100px 0 100px 0;
width: 960px;
height: 300px;
overflow: hidden;
z-index: 3000;
float:right;
margin-top: -100px;
margin-left: 300px;
}
#portfolio_title{
width: 610px;
margin-top: -160px;
margin-left: -20px;
text-align: left;
float: right;
}

p.portfolio{
font-family: CenturyGothicRegular,century gothic, verdana, sans-serif;
font-size: 0.813em;
line-height: 1.9em;
color: #f2f1f1;
text-shadow: #524339 1px 1px 2px;
word-spacing: 0.01em;
text-align: right;
padding-top: 0px;
margin-top: 20px;
}

.portfolio_left_text{
width: 300px;
float: left;
text-align: right;
padding-right: 50px;
margin: -40px 0 0 0;
}
.portfolio_right_image{
width: 400px;
float: left;
margin-top: -23px;
}

Any ideas. I know the css is pretty messed up but all the rest of the browsers have played nicely.

thankyou.

[Brido]

Code:

.portfolio_right_image {
float:left;
margin-top:-23px;
width:400px;
}

The width you have on your div is being exceeded by the width of the image you are loading into it.

[guirigales]

Thanks,

I adjusted the size of the image in the css and it all ads up to 960px wide now. But it still looks the same.

thanks

[Brido]

Well, lets try fixing up some of your css.

Code:

.portfolio_container {
float:right;
margin-top:-50px;
overflow:hidden;
padding:50px 0;
width:960px;
}

[Brido]

I see now what the problem is, we’ll have to do some editing to both HTML and CSS. I’ll see if I can give you some code here sometime during the day.

[guirigales]

"Brido" wrote:

I see now what the problem is, we’ll have to do some editing to both HTML and CSS. I’ll see if I can give you some code here sometime during the day.

Hi Brido,

I replaced what you added earlier, and while that takes care of the alignment problem it still dissapears up top. I am trying to play with the margins and padding but without much luck.

I think the original problem was the logo pushing it over.

Id appreciate the help if you dont mind.

thanks

[virtual]

You are going to have to add an IE7 specific stylesheet and change the following:

Remove from portfolio-container the margin-top: -50px;
In .portfolio_left_text add padding-top: 5px; and change margin to margin-top: -10px;
in portfolio_title add padding-top: 5px;

[guirigales]

"virtual" wrote:

You are going to have to add an IE7 specific stylesheet and change the following:

Remove from portfolio-container the margin-top: -50px;
In .portfolio_left_text add padding-top: 5px; and change margin to margin-top: -10px;
in portfolio_title add padding-top: 5px;

Funnily enough I wrote down IE7 conditional in my notepad last night to try this morning…Ill try it and ket you know.

thankyou

[guirigales]

My first Conditional Stylesheet!

Many thanks to all. After some playing around with an IE7 conditional stylesheet I got it all working.

Cheers

[Author]

Posts