Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2003
    Posts
    7
    Member #
    4156
    I have a text box and button that are not displaying properly in my layout, the section it is placed in is defined at a static 30px and the images are staying in their proper place. Can someone here help me understand where I am going wrong with this?

    http://www.zigzap.com/work2

  2.  

  3. #2
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    I don't see any margins defined for your form elements. Maybe you need to set their margins to 0.
    choosy developers choose gif!
    website | paintings | blog

  4. #3
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    Also when working with multiple div tags make sure on the divs that you are 100% certain of the height to specify an overflow:hidden property.... Things like

    HTML Code:
    <div style="position:relative; height: 100px">
       Some Text Here
    </div>
    <div style="position:relative" class="content">
       <h1>Title Tag Here</h1>
    </div>
    I didn't test the specific example out but I know from other projects that when using relative positioning and elements that by default have margins, the layout will get screwed up. The example above might cause the first div's height to be more than just 100px... Looking at your site, it seems that you have this error going on in IE 6. A simple (and not so simple) fix would be to do something like...
    HTML Code:
    <div style="position:relative; height: 100px; overflow:hidden">
       Some Text Here
    </div>
    <div style="position:relative" class="content>
       <h1>Title Tag Here</h1>
    </div>
    Bam! No more positioning error! Note: when using mulitple divs positioned relatively a lot of weird stuff can happen, like your content div not laying in the backround image correctly and what not... sometimes you'll need to add a height: 100% thing in. It really all depends on the situation... Every scenario is different and require a different solution...

    Hope some of this helps!!
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  5. #4
    Junior Member
    Join Date
    Dec 2003
    Posts
    7
    Member #
    4156
    I tried to add margin:0px; to the section of css in the stylesheet in the header of the page, no noticeable difference occurred with that added.

    Next I tried your suggestions darknailblue and even after adding as much as style="position:relative height:30px; overflow:hidden" to that div layer I get no change in how it appears. Am I supposed to do something else to the other div layers?

  6. #5
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Okay I looked at your HTML and it doesn't seem like anything is displaying incorrectly - you just need to add margins to get the textbox and button where you want.

    Try changing
    HTML Code:
    <input type="text" name="search" id="search" />&nbsp;<input  name="Go" type="button" value="Go" />
    to

    HTML Code:
    <input type="text" name="search" id="search" style="margin-bottom: 7px" />&nbsp;<input name="Go" type="button" value="Go" style="margin-bottom: 7px" />
    ...or add more margin-bottom if you want them higher up. It displayed fine for me in Firefox w/ this fix.

    H
    choosy developers choose gif!
    website | paintings | blog

  7. #6
    Junior Member
    Join Date
    Dec 2003
    Posts
    7
    Member #
    4156
    Quote Originally Posted by raspberryh
    Okay I looked at your HTML and it doesn't seem like anything is displaying incorrectly - you just need to add margins to get the textbox and button where you want.

    Try changing
    HTML Code:
    <input type="text" name="search" id="search" />&nbsp;<input  name="Go" type="button" value="Go" />
    to

    HTML Code:
    <input type="text" name="search" id="search" style="margin-bottom: 7px" />&nbsp;<input name="Go" type="button" value="Go" style="margin-bottom: 7px" />
    ...or add more margin-bottom if you want them higher up. It displayed fine for me in Firefox w/ this fix.

    H
    Thanks raspberry, this might have seemed semi transparent to you but to me it was very frustrating.

    :-D Your help was greatly appreciated.

  8. #7
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    No problem
    choosy developers choose gif!
    website | paintings | blog


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com