www.webdeveloper.com
Results 1 to 13 of 13

Thread: CSS not displaying correctly?

  1. #1
    Join Date
    Nov 2002
    Posts
    411

    CSS not displaying correctly?

    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

    Code:
    <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!
    Attached Images Attached Images
    John

  2. #2
    Join Date
    Jan 2003
    Posts
    136
    I see no CSS.

    What is that closing </p> doing there?
    YUPAPA Webhosting ~~~
    Support
    meow at yupapa dot com
    http://yupapa.com

  3. #3
    Join Date
    Nov 2002
    Posts
    411
    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:

    Code:
    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 ; }
    John

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    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.

  5. #5
    Join Date
    Jan 2003
    Posts
    136
    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>
    YUPAPA Webhosting ~~~
    Support
    meow at yupapa dot com
    http://yupapa.com

  6. #6
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    <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>

  7. #7
    Join Date
    Jan 2003
    Posts
    136
    I'm sorry! I'm blind.

    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?
    YUPAPA Webhosting ~~~
    Support
    meow at yupapa dot com
    http://yupapa.com

  8. #8
    Join Date
    Nov 2002
    Posts
    984

    Re: CSS not displaying correctly?

    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).
    Last edited by Stefan; 01-16-2003 at 07:56 AM.
    // Stefan Huszics

  9. #9
    Join Date
    Jan 2003
    Posts
    136
    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.
    YUPAPA Webhosting ~~~
    Support
    meow at yupapa dot com
    http://yupapa.com

  10. #10
    Join Date
    Nov 2002
    Posts
    411
    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?
    Attached Images Attached Images
    John

  11. #11
    Join Date
    Nov 2002
    Posts
    411
    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.
    John

  12. #12
    Join Date
    Jan 2003
    Posts
    136
    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?
    (only thing changed is the img path)
    YUPAPA Webhosting ~~~
    Support
    meow at yupapa dot com
    http://yupapa.com

  13. #13
    Join Date
    Nov 2002
    Posts
    411
    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:
    Attached Images Attached Images
    John

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles