CSS problem?

S

studioeighty

Member
Hi guys,

hopefully someone can help me out on this one!

On the portfolio page when you make the screen smaller the page moves about:

34432005mn2.jpg


Red lines indicate where the main image and arrows should line up with.

studioeighty.co.uk - Freelance Graphic Design - Logos, Business Cards, Flyers, Websites, Brochures, Branding

If someone could have a look at the code, any help with this would be great!

cheers in advance,

Steve
 
It works fine in firefox and safari so its an IE thing. Sometimes IE applys margin to elements. a good place to start could be a css reset attached at the start of the head CSS Tools: Reset CSS see if that helps to begin with... other wise you could write an IF IE rule and just target the element and use - margins as a quick fix...
 
cheers for the prompt reply! - just tried the CSS Reset, either I did something wrong or it didnt work! - It just aligned everything to the left.

How easy is the latter to do....IE rule? sorry not to hot on this stuff yet!

thanks
Steve
 
Basically you use the below:
to specify css which will only apply to internet explorer, you can also specify which version but I don't have the rules to hand...

<!--[if ie ]>
<style type="text/css">

</style>
<![endif]-->

I'll try and have another look at your site ina bit and let you know if I find anything
 
ok cool I see what you mean now, gotta get some work done and will take another look soon as I can
 
Studioeighty,

Hey bud, please dont take this the wrong way but your code is a mess lol ! :)
now for the fix try the following....

look for in your html ...

<body onload="MM_preloadImages('../images/web_05.png')">

change it so it reads .....

<body onload="MM_preloadImages('../images/web_05.png')">
<div id="site-wrapper">


now look for the following.....

</body></html>

change it so it reads......

</div>
</body></html>


now in you css look for the following......

body {
font-family: Verdana, Arial;
background:
color: #000;
width: 907px;
margin: auto;
text-align: center;
padding-bottom: 20px;
}

remove / delete the property width:907px

and add the following at the foot of your css.

#site-wrapper {position:relative;margin:0 auto;width:907px;}

let me know if that helps...

Sunburn.
 
No offence taken! - I must admit, I don't specialise as a web designer - its something I want to learn but knew I had to get a site up quick to advertise my services! - I will re-do the site eventually, properly in CSS.

I think that has done the job mate! - thanks for working your magic!!

Nice one
Steve
 
You must log in or register to reply here.
Back
Top