Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quirk between IE and FF

    Hello, I am no expert, but I have dabbled a bit into web code. I have had an annoying problem for quite some time that I would like help with.

    My page http://boochkn.com/forums
    has a header that appears correctly (or at least as I want it to) in FF but in IE (all ver that I know of) it won't push the top left graphic to the very edge.

    Can someone shed light on my problem? Thanks in advance.

    Matt

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Use the correct method and not a table?

    CSS:
    Code:
    div {
      height: 125px;
      min-width: 805px; /* Ensures that images don’t overlap. */
      background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
      }
    a {
      display: block;
      height: 100%;
      background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
      }
    HTML:
    Code:
    <div>
      <a title="Board Home" href="…link that forum won’t allow…"></a>
    </div>
    Last edited by Arbitrator; 12-28-2006 at 12:13 AM. Reason: Added min-width property.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    The page looks identical in FF 2.0.0.1, IE 6 and 7. Maybe you could make a screenshot of where you see the problem...?

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I didn't clarify before..the problem is only after IE windows are bigger than 1248px wide. See Below:

    http://boochkn.com/images/boochkn.com_prob1.JPG

    http://boochkn.com/images/boochkn.com_prob2.JPG
    Last edited by boochkn; 12-28-2006 at 03:48 PM. Reason: fix link 2

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    I saw the space at 1280×1024 though the space was a bit thinner than that.

    Anyway, the solution I suggested should (A) work at any resolution, (B) require less code, and (C) be semantically correct. Thus it should solve your problem. With regards to (B), if you use an external style sheet for this, you can reduce the code used for every single forum page served. With regards to (C), using tables for layout is incorrect especially when CSS can do things much more smoothly, as in this case.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!! I will be trying it today...I guess I never got past html to realize the potential of CSS...will be trying to get more edu on CSS now.

  • #7
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Lol - don't invision boards by default use a customizable CSS stylesheet anyways? Just log into the Admin Panel and you can either correct the sites boards stylesheet or go to where you can customize the forums images and then in the header box just add this......

    Code:
    <style type="text/css">
    div {
      height: 125px;
      min-width: 805px; /* Ensures that images don’t overlap. */
      background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
      }
    a {
      display: block;
      height: 100%;
      background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
      }
    </style>
    <div>
    <img src="imageurlhere.jpg">
    </div>
    Think it'll work....?
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by boochkn View Post
    Thanks!! I will be trying it today...I guess I never got past html to realize the potential of CSS...will be trying to get more edu on CSS now.

    Wow, not only is that way less code but it's actually simpler once I did it than what I was doing before...I will definitely explore more ways to use CSS for my web pages.

    thanks!!

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Seems I made a mistake above. If you want to prevent the two images from overlapping at small resolutions, the min-width value above should be 827 pixels, not 805. You may want to just let them overlap though because that seems preferable to the scroll‐bars you’ll get instead; the overlap looks better than the scroll‐bars IMO.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Seems I made a mistake above. If you want to prevent the two images from overlapping at small resolutions, the min-width value above should be 827 pixels, not 805. You may want to just let them overlap though because that seems preferable to the scroll‐bars you’ll get instead; the overlap looks better than the scroll‐bars IMO.
    Thanks, you are right, the overlap looks fine compared to the scrolling...

  • #11
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by scriptz View Post
    Lol - don't invision boards by default use a customizable CSS stylesheet anyways? Just log into the Admin Panel and you can either correct the sites boards stylesheet or go to where you can customize the forums images and then in the header box just add this......

    Code:
    <style type="text/css">
    div {
      height: 125px;
      min-width: 805px; /* Ensures that images don’t overlap. */
      background: #0a1029 url("http://boochkn.com/images/forumlogo.jpg") no-repeat;
      }
    a {
      display: block;
      height: 100%;
      background: url("http://boochkn.com/images/hdrfinal.gif") right no-repeat;
      }
    </style>
    <div>
    <img src="imageurlhere.jpg">
    </div>
    Think it'll work....?

    Yeah, I did that...I was able to make the connection between the stylesheet code given and how it would apply in my situation I also named it .titlebarforum instead of div so that all the div tags wouldn't convert.


  •  

    Posting Permissions

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