Urgent website help

drusus · 24 May 2008 at 17:14

Basically my girlfriend studies photography but as part of the course they have to design and code their own website using dreamweaver. She had finished the site and it worked in firefox. It has to work in IE too though and for some reason when displayed in the browser all of the text moves to the left?

Can anyone shed any light on this problem.

Many Thanks
Andy

Makhaira · 24 May 2008 at 17:17

Not without seeing the code, no. Most likely it'll be down to either a CSS rendering difference between the 2 browsers, or a table cell property difference, those are the most common issues. Impossible to tell without seeing the code.

drusus · 24 May 2008 at 17:24

Thanks for you're reply dude. The code as follows;

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../webdesign.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id= "logo"><img src="../images/viewfinder4.jpg" /></div>
<div id= "camera"><img src="../images/camera2.jpg" alt="camera logo" /></div>
<div id= "names"><img src="../images/names3.jpg" alt="names" /></div>
<div id= "home"><img src="../images/home2.jpg" alt="home" /></div>
<div id= "galleries"><a href="galleries.html"><img src="../images/gallery2.jpg" alt="gallery" /></a></div>
<div id= "biography"><a href="biographies.html"><img src="../images/Biography2.jpg" /></a></div>
<div id= "benjamin"><img src="../images/benjamin.jpg" alt="Walter Benjamin" /></div>
<h3> Walter Benjamin</h3>
<p1> Walter Benjamin was a philospher<br/>
in the late 1800s.<br/>
He had a theory that in time images<br/>
would be reproduced more and more.<br/>
In his essay he wrote "In principle<br/>
a work of art has always been<br/>
reproducible. Man-made artifacts<br/>
could always be imitated by men.<br/>
replicas were made by pupils in <br/>
practice of their craft, by masters <br/>
for diffusing their works, and, finally,<br/>
by third parties in persute of gain."</p1>

</body>
</html>

unwashed potato! · 24 May 2008 at 17:33

there is still more to come...

we need the code from webdesign.css

drusus · 24 May 2008 at 17:38

ok dude here it is;

@charset "utf-8";
body {
background-attachment: fixed;
background-image: url(images/background3.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #3C3A3D;
margin: 0px;
}

#logo {
position: absolute;
visibility: visible;
left: 180px;
top: 49px;
height: 69px;
}
#camera {
position: absolute;
left: 403px;
top: 48px;
}
#names {
position: absolute;
top: 94px;
left: 256px;
}
#home {
position: absolute;
left: 188px;
top: 178px;
}
#about {
position: absolute;
left: 200px;
top: 222px;
}
#biography {
position: absolute;
left: 183px;
top: 239px;
}
a:visited {
color: #FFFFFF;
}
a:active {
background-image: url(images/biography3.jpg);
}
a:active {
position: absolute;
}
#flower {
position: absolute;
left: 537px;
top: 353px;
}
#tower {
position: absolute;
left: 281px;
top: 351px;
}

#galleries {
position: absolute;
left: 191px;
top: 314px;
background-image: url(galleries.html);
}
#couple {
position: absolute;
left: 289px;
top: 176px;
}
#Traje {
position: absolute;
left: 533px;
top: 211px;
width: 98px;
height: 99px;
}
#copa {
position: absolute;
left: 410px;
top: 211px;
}
#largecopa {
position: absolute;
left: 213px;
top: 83px;
}
p {
font-family: "Courier New", Courier, monospace;
position: absolute;
left: 181px;
top: 536px;
visibility: visible;
text-decoration: underline;
color: #000000;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #003399;
}

h1 {
font-family: "Courier New", Courier, monospace;
font-size: 24px;
font-style: normal;
line-height: normal;
color: #F68559;
position: absolute;
left: 438px;
top: 168px;
}
h2 {
font-family: "Courier New", Courier, monospace;
color: #80914A;
position: absolute;
left: 317px;
top: 456px;
}

#largecouple {
position: absolute;
left: 258px;
top: 72px;
}
#traje {
position: absolute;
left: 216px;
top: 72px;
}
#glencoe {
position: absolute;
left: 417px;
top: 353px;
}
#largeglencoe {
position: absolute;
left: 212px;
top: 110px;
}
#lrgflower {
position: absolute;
left: 288px;
top: 64px;
}
#lrgtower {
position: absolute;
left: 216px;
top: 136px;
}
a:hover {
color: #000000;
}
a:link {
color: #333333;
}
#benjamin {
position: absolute;
left: 292px;
top: 238px;
}
h3 {
font-family: "Courier New", Courier, monospace;
position: absolute;
color: #999999;
font-size: 24px;
left: 323px;
top: 192px;
height: 25px;
width: 250px;
}
p {
position: absolute;
color: #999999;
}
p1 {
font-size: 12px;
position: absolute;
left: 464px;
top: 253px;
color: #666666;
height: 200px;
width: 180px;
background-color: #FFFFFF;
}
#maria {
position: absolute;
left: 277px;
top: 194px;
}
#Amy {
position: absolute;
left: 296px;
top: 345px;
}
p2 {
position: absolute;
left: 410px;
top: 327px;
color: #666666;
font-size: 12px;
height: 200px;
width: 250px;
}
p3 {
font-family: "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
height: 100px;
width: 200px;
position: absolute;
left: 411px;
top: 196px;
}

Markus123 · 24 May 2008 at 17:51

P1, P2, P3 etc aren't valid HTML/XHTML tags so behaviour across browsers is undefined.

You could use a class or id on the <p> tag instead, e.g:

<p class="text">Walter Benjamin was a philospher...</p>

and in the css

p.text {
...
}

unwashed potato! · 24 May 2008 at 19:03

actually the best thing would be if we could see a working example of the site online, is it hosted anywhere yet? if so can you post a link as then it usually only takes a few seconds to see why

drusus · 24 May 2008 at 22:01

Thanks for your replies guys. I'll try and get it hosted somewhere so you can check it out.

Many thanks

Makhaira · 24 May 2008 at 23:35

The other extremely helpful thing to do is to give your DIVs a coloured border, so that you can see exactly what is happening at block level when the text shifts. Very useful method for any CSS block element, and also tables, when they're misbehaving.

unwashed potato! · 25 May 2008 at 11:39

Makhaira said:
The other extremely helpful thing to do is to give your DIVs a coloured border, so that you can see exactly what is happening at block level when the text shifts. Very useful method for any CSS block element, and also tables, when they're misbehaving.

imo it is better to give very different colour backgrounds so that you can see exactly which is which. this is better then borders as borders add more height and width and can mess up the design further

Makhaira · 25 May 2008 at 11:42

True, that's the technique I use for minor shifts, but from what he's describing this is anything but minor

.

Then again, I wouldn't know, I haven't seen it yet.... (hint hint)

drusus · 25 May 2008 at 22:54

I'm still having trouble with the site. I can upload the files somewhere for download. Anyway I tried adding <div align="center">

Now the text aligns centre in IE instead of left. Am I on the right track or do i still have to change p1, p2 and p3?

Andy

Sic · 25 May 2008 at 23:20

the problem with that CSS is IE will calculate the actual height that the content would have occupied and everything will scroll as if all the elements were in their original place. Ideally, everything should be positioned using floats rather than positioning, but I'm guessing that you don't have time to be worrying about that as it would involve a complete redoing of the whole CSS

Makhaira · 25 May 2008 at 23:25

I notice you're not using floats at all, try floating your blocks left

float:left;

unwashed potato! · 25 May 2008 at 23:25

well if you could put the whole folder that these files are in into a zip or something then stuff that somewhere, post link, so we can then download it and view it, or put it all online as should be on some free webspace, google free webspace and you will get millions of results, then post a link to where it is to view.

but anyway p1/p2 etc need to go, they need to be changed into proper classes or id's, and then referred to properly.

e.g. instead of <p1>stuff here</p1>,

it should be <div class="p1">stuff here</div>,

then the styling would be,

.p1 {
font-size: 12px;
position: absolute;
left: 464px;
top: 253px;
color: #666666;
height: 200px;
width: 180px;
background-color: #FFFFFF;
}