Urgent website help

drusus

drusus

drusus

Associate
Joined
30 Apr 2008
Posts
79
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
 
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.
 
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>
 
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;
}
 
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 {
...
}
 
Last edited:
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
 
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.
 
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.
Click to expand...

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
 
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) :P
 
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
 
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
 
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;
}
 
You must log in or register to reply here.
Back
Top Bottom