|
CSS - Photoshop Css
Hello all, I am creating a photoshop image that i am slicing and outputting into css. When it loads in firefox its perfect but when i load it into IE7 its all messed up. Is there a setting in photoshop im missing or does IE7 really suck that bad. Heres the code. Any help would be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Untitled-3) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:700px;
height:117px;
}
#Untitled-3-01_ {
position:absolute;
left:0px;
top:0px;
width:371px;
height:19px;
}
#Untitled-3-02_ {
position:absolute;
left:371px;
top:0px;
width:34px;
height:36px;
}
#Untitled-3-03_ {
position:absolute;
left:405px;
top:0px;
width:295px;
height:27px;
}
#Untitled-3-04_ {
position:absolute;
left:0px;
top:19px;
width:308px;
height:54px;
}
#Untitled-3-05_ {
position:absolute;
left:308px;
top:19px;
width:63px;
height:17px;
}
#Untitled-3-06_ {
position:absolute;
left:405px;
top:27px;
width:295px;
height:9px;
}
#Untitled-3-07_ {
position:absolute;
left:308px;
top:36px;
width:392px;
height:37px;
}
#Untitled-3-08_ {
position:absolute;
left:0px;
top:73px;
width:700px;
height:6px;
}
#Untitled-3-09_ {
position:absolute;
left:0px;
top:79px;
width:700px;
height:29px;
}
#Untitled-3-10_ {
position:absolute;
left:0px;
top:108px;
width:700px;
height:9px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Untitled-3) -->
<div id="Table_01">
<div id="Untitled-3-01_">
<img id="Untitled_3_01" src="images/Untitled-3_01.jpg" width="371" height="19" alt="" />
</div>
<div id="Untitled-3-02_">
<img id="Untitled_3_02" src="images/Untitled-3_02.jpg" width="34" height="36" alt="" />
</div>
<div id="Untitled-3-03_">
<img id="Untitled_3_03" src="images/Untitled-3_03.jpg" width="295" height="27" alt="" />
</div>
<div id="Untitled-3-04_">
<img id="Untitled_3_04" src="images/Untitled-3_04.jpg" width="308" height="54" alt="" />
</div>
<div id="Untitled-3-05_">
<img id="Untitled_3_05" src="images/Untitled-3_05.jpg" width="63" height="17" alt="" />
</div>
<div id="Untitled-3-06_">
<img id="Untitled_3_06" src="images/Untitled-3_06.jpg" width="295" height="9" alt="" />
</div>
<div id="Untitled-3-07_">
<img id="Untitled_3_07" src="images/Untitled-3_07.jpg" width="392" height="37" alt="" />
</div>
<div id="Untitled-3-08_">
<img id="Untitled_3_08" src="images/Untitled-3_08.jpg" width="700" height="6" alt="" />
</div>
<div id="Untitled-3-09_">
<img id="Untitled_3_09" src="images/Untitled-3_09.jpg" width="700" height="29" alt="" />
</div>
<div id="Untitled-3-10_">
<img id="Untitled_3_10" src="images/Untitled-3_10.jpg" width="700" height="9" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
Similar TutorialsHi everybody, It is clear to me that designing using CSS is the best way to go now and that designing with tables is practically from another era. I like to make my webpages with rich design, and generaly i use photoshop to design my layouts, then i switch to ImageReady and start slicing and slicing. I just can't change that routine. My question is how can i make a smooth transition to css, how do i translate my photoshop layout to CSS, what's the best way to do it (best practice). Are there any books or tutorials out there approaching this issue. Thanks to anyone that can help. Hey all, Our graphic designer Chrono has come up with a beautiful template, and Paul and I (the "coders") are developing a plan/system to turn the template into HTML/CSS. The URL of the template is http://www.mvcc.edu/sneakpeek.cfm. If you have any insight as to how to do this, please tell me! One other thing, what would you suggest for the white curved line that goes across the template? Thank you so much, Jordan |
|||||||