SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why is something SO SIMPLE such a PAIN - div spaces????

    I know Im a glutten for punishment but Im THAT busy. I have a new layout for our hosting company that SEEMED like it was gonna be a breeze but right from the start its become ONE GIANT PITA!

    page is www.dcpromotionsltd.com/new.html


    css file is at: www.dcpromotionsltd.com/styles/dcdhosting.css

    Im getting a space between the nav button floats (the butons) and the image next to it AND on the second rows (on right side) in IE (GOD I HATE THAT PROGRAM)

    AND for the first time ever Im having problems with FF 1.0 - Its dropping the div with the guy in the chair down a few pixels. Ive tried IE only hacks, negative margins etc etc etc & NOTHING SEEMS to fix either of them - WHAT THE HECK?

    AND we wonder why people say "screw it" and go back to tables loaded with images!

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to get FF to play nice by adding:

    #relax {
    margin-top: -3px;
    }
    #relax2 {
    margin-top: -3px;
    }

    to the style sheet, even thought I dont see any reason why it was needed. Ive tried the 3 pixel jog hack for the IE problem but with no effect whatsoever.

    Still dont understand why any of this is needed though, what happened to "natural flow"

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just came up from the laptop to my main machine and realized this layout blows up to kingdom come in FF 1.0 (I have .9) on the laptop... going to bed, Ive had enough for one day!

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    I played around with your page...
    This shouldn't fall apart.
    I think the answer to the picture problems is 'image {display:block}'.

    I hope this helps.

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I alway assumed images were block level! I definately like your way better and had read your site about using the ul for buttons (totally slipped my mind) but I REALLY want to know why this was happening (for future reference)

    I tried adding the display:block but it did not help with the IE problem - FF is now playing nice again.

    Am I correct that a div has NO padding or margins inherant to it? Does an image?

    Its just not making sense that a page with no padding, margins or borders breaks like this ...... As I said in my first post I thought this one was going to be a cakewalk and was totally shocked when the problems started.

    now let me see if I can make it thru the rest fo this layout wihtout smashing my computer........Im going to try your idea of the uls for the buttons this time. It does make a lot more sense

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Am I correct that a div has NO padding or margins inherant to it? Does an image?
    A div doesnt have any default margins or padding (unlike most other elements).

    The problem is that an image is treated like text by default and is an inline element (although special). Therefore in some modes and on some browsers you will find that room is left underneath the image for descenders in text so that they all sit level on the baseline. Of course you will then find that if you have a single image then there will be a 3px space below it.

    Setting the image to display block will cure it as long as you don't require the image to be inline. (You can also try floating the image, or giving the container a height to match the image, or setting vertical-align to bottom for the image (though this doesn't cure the gap it moves it up to the top).

    Hope that explains it a bit

    Paul

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now theres something I would have NEVER guessed, So when you drop an image in a div tag it allows for an imaginary text descender below it?

    OK, so this explains the FF gap in my layout below the buttons - does anyone know the cause of my original layouts 3px gap to the left of the div that floats besides both the buttons and the gfx below them in IE? At first I thought it was the 3px jog bug but applied the hack and it didnt fix it. I even tried negative margins in an IE only style block..

    I am tinkering with BonRouge's ul setup for the buttons. As I said before It does make more sense to do that anyways because in fact the buttons are just a list of hyperlinks. What was really interesting was the use of that same ul setup for the images that went beside and below the buttons. I honestly would have NEVER thought of that one.

    I guess the main problem is that Im trying to simulate what I used to do with sliced up images in tables on graphically enhanced sites. Funny I can slice these things up & get them into tables & running in minutes. Ive got to "unlearn" that 5 year bad habit somehow.

    BTW, before I forget "HAPPY NEW YEAR TO ALL!" Lets hope 2005 is a whole bunch better than 2004 was for everyone!

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    going great with some MINOR issues

    Well never let it be said I dont pay attention & learn. I redid the layout using BonRouge's WONDERFUL ul layout ideas - I am truely impressed and a new found believer - just wonderful that clear class was well worth the price of admission! - THANKS!

    I have one minor issue that I would like to straighten out though. In IE (what else) the line height of the list items that DONT have images is really big & yucky compared to FF. Im speaking of the right sidebar that has the plans in it. The list items which have images dont seem to be a problem, its the ones with plain text in them. Any ideas here, Ive tried quite a few things but nothing seems to effect them in IE.

    files are at the same urls as originally posted! Thanks!

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,
    Happy New Year and all that.
    I'm glad I was able to help.
    This :
    Code:
    ul.plans li {line-height:1em;}
    should sort out the line-height problem.

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ill will try that - BTW, I did find one very strange side effect to your layout idea. I tried to put an actual ul in the pages content OH MAN DID THAT HAVE ME GOING! no matter what I did I couldnt get bullets in a ul OR ol. I traced it back to this block:

    #header ul, li {
    margin:0;
    padding:0;
    list-style-type:none;
    }

    what I ended having to do was something like this:

    <ol class='fix'>
    <li class='fix'>Our staff has over 20 combined years of server administration and programming the languages used to make the servers, and your website tick.
    We know how to make them run like the wind.</li>
    <li class='fix'>To keep your website up and running with totally reliability we only use stable RedHat&trade; OS servers with a 99.9% uptime guarantee along with redundant nightly backups.</li>
    </ul>

    and then the CSS:

    .fix {
    list-style-image: url(/images/list-arrow.gif);
    margin: 0 0 0 15px;
    padding: 0;
    }

    VERY STRANGE INDEED!

    Happy New Year to all - I hope 2005 sees you extactly where you want be in life & business! I hope it sees my butt planted in sunny FLA by June!

  11. #11
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't have to do all that.
    This
    Code:
    <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ol>
    and this :
    Code:
    ol li {
    position:relative; 
    list-style-image: url(/images/list-arrow.gif);
    }
    would have worked fine. Oh well, don't suppose it matters so much as long as you've got it going OK.

    Your page looks pretty good by the way.
    Last edited by BonRouge; Dec 31, 2004 at 22:47.

  12. #12
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ill give that a try when I get a chance..... this is a QUICK fix for one of our 4 companies Im trying to get done over the holiday, the old one just makes my skin crawl - I let one of our designers (no longer with us) do it with a template because we needed it quick ........ Ill never let that happen again!

  13. #13
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange things happening - well not that strange

    Ive been working to get this thing done today (holiday my butt!) and had one very strange issue come up when the content on the page is longer than the sidebar and its padding. Its wrapping around the bottom of the sidebar.

    Now I know that because of the sidebar being floated that it should wrap but Im scratching my head trying to get it to STOP! Ive tried setting a height of 100% on the plans-sidebar div tag, have tried using a clear etc etc...... what exactly do I have to do (beside setting a width on the content div) to stop this from happening?

    You can see it happening at this link:

    http://www.dcpromotionsltd.com/servl...ble-use-policy

  14. #14
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div#content {
    margin-right:250px;
    }
    should do it (I think).

  15. #15
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried that - FF works fine but IE was obviously screwing around adding up the padding and margins wrong (why should I be suprised?) so there is a 40 px jag in the text - I had to remove the 40px margin-left on the sidebar to fix that little issue. SEE, Im learning!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Don't forget that ie has a double margin bug on the side of a float nearest the window (or containers) edge. You need to add display:inline to counteract it. See faq on floats for a full explanation.

    You also hav ethe 3 pixel jog on the right side of your content (underneath the right float). This is also explained in the FAQ on floats if you wish to correct it. It doesn't notice much but some people notice these things

    Paul

  17. #17
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I need to get this up tonight & I still have all the mod_rewrites to do so Ill have to come back & do some minor tweaking next weekend - BUT while I have your attention old buddy old pal (can you tell your being buttered up?)

    On this page: http://www.dcpromotionsltd.com/servl...-hosting-facts

    I have some Java code I made up for these folks to use and have tried both a PRE tag & the CSS white-space: pre (gave up on this one because of the IE 5x no support issues), in IE at lower resolutions its dropping ALL the page's content below the right side bar. You can see the problem in any browser but of course IE is the only one dropping it like this. Its not that the code is that wide BUT I have this 200px or so indent on the left of the code. What the heck is causing that. Ive tried negative margins CSS (applied via the pre tag), padding, I even tried position:relative & absolute (now that was a messy one) - I just spent an hour searching this site & the web for exactly which inherant property the pre tag has that I need to counteract (if its possible)

    I even coded a scrollable box like they have here for code and it worked fine but because of this massive indent you can barely see the code when it loads.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    the problem seems to be that you have copied whitespace into that code listing. If you cut and paste the code into notepad you see that it has a great big margin on the left.

    I just edited the white space and now ie display as it should.

    Code:
    <pre>
    Class MailServer {
     
    protected boolean sendForm(String message, String subject, String from) {
    &nbsp; String to = "some_email_addy@other_isp.com";
    &nbsp; boolean sessionDebug = false; // please turn this off so it doesnt load up the log files
    &nbsp; java.util.Properties props = System.getProperties();
     
    &nbsp; Authenticator auth = new SMTPAuthenticator();
    &nbsp; props.put("mail.smtp.host", "mail.your_domain_name");
    &nbsp; props.put("mail.smtp.auth", "true");
     
    &nbsp; Session session = Session.getInstance(props, auth);
    &nbsp; session.setDebug(sessionDebug);
    &nbsp; try {
    &nbsp; &nbsp; Message msg = new MimeMessage(session);
    &nbsp; &nbsp; msg.setFrom(new InternetAddress(from));
    &nbsp; &nbsp; InternetAddress[] address = {new InternetAddress(to)};
    &nbsp; &nbsp; msg.setRecipients(Message.RecipientType.TO, address);
    &nbsp; &nbsp; msg.setSubject(subject);
    &nbsp; &nbsp; msg.setText(message);
    &nbsp; &nbsp; msg.setSentDate(new java.util.Date());
    &nbsp; &nbsp; Transport.send(msg);
    &nbsp; &nbsp; sent = true;
    &nbsp; &nbsp; }
    &nbsp; catch(MessagingException mex) {
    &nbsp; &nbsp; mex.printStackTrace();
    &nbsp; &nbsp; } 
    &nbsp; return sent;
    &nbsp; }
    };
     
    class SMTPAuthenticator extends Authenticator {
    &nbsp; protected PasswordAuthentication getPasswordAuthentication() {
    &nbsp; &nbsp; return new PasswordAuthentication("username", "password");
    &nbsp; }
    }; 
    </pre>
    The float will still drop but only when the longest line is too long.

    Paul
    Last edited by Paul O'B; Jan 1, 2005 at 17:19.

  19. #19
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually thought that too so I tried the same thing but it hasnt changed a bit...... I use a text editor & code by hand so I dont think it coming from there. I also just looked at it in VI editor right on the server & there is no whitespace showing in it either --- VERY strange indeed!

  20. #20
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WAIT - Hold on one minute I see what you mean, its the html formatting indentation causing it! DAMMIT - this is gonna be tricky to fix. I read in .txt files with the content from Servlets and the html code is indented and formatted by them - shoot, OK, now Ive gotta go play in my Java!


Bookmarks

Posting Permissions

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