CSS not displaying correctly?

[jpmoriarty]

I'm using CSS on a new intranet i'm making, and so far it's been working really well. However, i'm having a few problems with my picture browsing / uploading directories.

When a user uploads a picture, i'm using PHP to resize the image and display a thumbnail. However, the CSS seems to be going a bit screwy - sometimes it's okay, sometimes it's all over the shop, as hopefully the image i've attached will show. The html is being generated okay, with <h1>giving me the title bar and <div id="subsection"> doing the grey background bit okay. This is the HTML that's generated for the page in the picture


<h1>Viewing Directory 83</h1>

<div id='subsection'><p>
<a href='#' onClick="window.open('83/PICT0004.JPG', 'Image', 'toolbar=0 scrollbars=1 resizable=1');"
onmouseover="BorderOn(aPICT0004);" onmouseout="BorderOff(aPICT0004);">
<img src='makeimage.php?file=PICT0004.JPG&directory=83' class='boximage'
border='1' name='aPICT0004'></a>

&nbsp;&nbsp
</p></div>
<h1>Upload additional files</h1>
<div id='subsection'>
<p>Upload this file:</p>
<p>
<form enctype="multipart/form-data" action="viewphotos.php" method=post>
<input name="userfile" type="file" size='40'></p><p>
<input name="directory" type="hidden" value="83">
<input name="upload" type="hidden" value="1">
<input name="createdir" type="hidden" value="0">
<input type="submit" value="Upload photo">
</form></p>
</div>

So there's only one div for each bit etc - so why are there additional lines and boxes over the place? Could it be something to do with because the images are auto generated it doesnt know how big they're going to be? Or is it an IE 6 thing that i can get a patch for somewhere?

Please help - I dont want to question my new found love and belief for CSS!

[meow]

I see no CSS. :confused:

What is that closing </p> doing there?

[jpmoriarty]

it's closing the <p> that's opened before the hidden inputs.

I didnt include the CSS since it works for other sections, but i'll put it in since you asked:


body { font-family : verdana, sans-serif ;
font-size: 10pt;
scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-track-color: #CCCCCC;
scrollbar-arrow-color: #FF8400;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #FFFFFF;
margin: 10px 5px 10px 1px ;
color: white;}

basefont { font-family: tahoma, verdana, sans-serif;
font-size: 100%;}

h1 { color: #000000 ;
font-weight: bold ;
background: #989898 ;
border: 1px solid #323232 ;
margin: 3px 3px 0px 3px ;
font-size: 80%;}


a { color: #E7E7E7;
text-decoration: none ;}

a:hover { color: #FF8400 ; }

p { color: #323232 ;
font-size: 80% ;
margin: 3px 3px 3px 3px; }

td { color: #52567C ;
font-size: 10pt ;
margin: 2px 2px 10px 2px; }

#subsection { margin: -1px 3px 0px 20px;
width: auto ;
border: 1px solid #323232;
background: #CCCCCC ; }

#subsection p a { color: #000000 ;
text-decoration: none ;
font-weight: bold ;
}

#subsection p a:hover { color: #FF8400 ;
text-decoration: underline ;}

#subsubsection p {margin: 3px 3px 3px 20px;}

#subsubsection p a {color: #000000 ; font-weight: normal ;}

#subsubsection input {margin: -20px 10px 0px 0px; }


.boximage {
border-color: #CCCCCC;
background: transparent;
border-style: solid;
border-width: 2px;
}

.boximage1 {
border-color: #FF8400;
background: #EEEEEE;
border-style: solid;
border-width: 2px;
}

.logo {
text-align: "center" ;
border-style: solid ;
border-width: 0px ;
border-color: #FF8400 ;}

.date {
text-align: "center" ;
color: #FF8400 ;
font-size: "80%" ;
font-weight: "bold" ;
margin: 5px ; }

[gil davis]

Perhaps it has something to do with having two DIVs with the same ID (subsection). All ID's must be unique. The way you are using it, you should use a class instead. Reserve ID for scripting or linking purposes.

[meow]

Originally posted by jpmoriarty
it's closing the <p> that's opened before the hidden inputs.

No, this one:

<h1>Viewing Directory 83</h1>

<div id='subsection'><p>
<a href='#' onClick="window.open('83/PICT0004.JPG', 'Image', 'toolbar=0 scrollbars=1 resizable=1');"
onmouseover="BorderOn(aPICT0004);" onmouseout="BorderOff(aPICT0004);">
<img src='makeimage.php?file=PICT0004.JPG&directory=83' class='boximage'
border='1' name='aPICT0004'></a>


</p></div>

[pyro]

<h1>Viewing Directory 83</h1>

<div id='subsection'><p>
<a href='#' onClick="window.open('83/PICT0004.JPG', 'Image', 'toolbar=0 scrollbars=1 resizable=1');"
onmouseover="BorderOn(aPICT0004);" onmouseout="BorderOff(aPICT0004);">
<img src='makeimage.php?file=PICT0004.JPG&directory=83' class='boximage'
border='1' name='aPICT0004'></a>


</p></div>

[meow]

I'm sorry! I'm blind. :o

Anyway, you quote some values that shouldn't be quoted.

text-align: "center"
font-size: "80%"
font-weight: "bold"

But that doesn't cause this. Have you checked the php generated HTML? Could something be added there?

[Stefan]

Well pyro beat me to the punch, but there is still a runaway <p> in there.


Originally posted by jpmoriarty

[CODE]

<p>
<form enctype="multipart/form-data" action="viewphotos.php" method=post>...
</form></p>


You can NOT have a <form> inside a <p>.

Thus your CSS will not aplly to the objects you think it will since the browser errorcorrection interprets you code into something like
<p></p><form></form> </p> (last /p probably just ignored).

[meow]

Good catch.
It still doesn't explain the extra lines though. The posted code displays OK with errors so I guess something must be added by the script.

[jpmoriarty]

thanks for the comments.

Have you checked the php generated HTML
That's what I've posted. hence why I said
[QUOTE]the HTML that's generated for the page is...[QUOTE]
I've corrected taking the form out of the <p>, but I still have the problem with the line across the photo. I'm sure it's an HTML problem since there are probelms if i draga window over the top of it (see attached file) - you can see where when i've dragged the window over the top it's not replaced the grey background. IS it because I've coded the CSS wrong though, or is it likely to be an IE problem?

[jpmoriarty]

ah well this is really odd. Knowing as little as i do about CSS (And i think we'll all agree, i know very little) I took on board what was said about class and id, i did a search and read people's helpful comments on the matter and made the appropriate changes.

That didnt really make much difference, so in an attempt to increase the gapo between the two bits i tried including another <div> and <div> exactly around the current ones - and it's working. Anyone know why? and regardless, I'm assuming that there's something wrong with teh way I've coded it so if someone could point that out too I'd be very grateful.

[meow]

Ah, THAT line. I thought you were referring to the fat line in your first screen cap (part of your browser?).

The reason I assumed it wasn't the generated HTML is that I don't see any extra lines with your original code. IE5, O7, Moz on Win2K.

See it here? (http://w1.181.telia.com/~u18109800/test/WDF.html)
(only thing changed is the img path)

[jpmoriarty]

if it had the code in it then it wouldnt be generated html though would it, it would be PHP.

I'm assuming that it must be an IE thing then, cos I get this when i look at your page: