How to get rid of the gap between Div tags

[Frinavale]

Hi there!

I'm creating a control that lets user's enter a time value using two text boxes and two buttons. When the user clicks the button, the text box value for the hours or minutes change....that's just JavaScript stuff and it works fine.

My problem is that I want to have a "Start" time and an "End" time in my control and I've run into a few problems manipulating the look of the controls.

What I'd like is to have the two text boxes beside each other (the text box for the hour followed by the text box for the minutes) and the buttons beside (to the left) of the text boxes...where the buttons are on top of one another...

I have it so that the text boxes are in their own <div> and the buttons in their own <div>. The buttons have been moved using CSS to be beside the text boxes. I couldn't use float because of issues I've been experiencing with Firefox.

Right now it looks okay except for the Huge gap between the Start time and the End time.

I think this gap is occurring because I'm moving the buttons beside the text boxes using position:relative and left,top,&bottom.

Could someone please help me get rid of this gap.

I've included my code so far...its pretty simple. I apologize for the asp tags, and I hope they don't confuse you.

Thanks a lot for your time!

<div class="picker">
             <div id="hrStart">
                <div class="time">
                    <asp:TextBox ID="TXT_HrStart" runat="server" MaxLength="2" Height="20px" Width="15px"></asp:TextBox>&nbsp;<asp:TextBox ID="TXT_MinStart" runat="server" MaxLength="2" Height="20px" Width="15px"></asp:TextBox>
                </div>
                <div class="timeAdjustingButtons">
                    <div style="padding:0 0 0 0;">
                        <input type=button ID="BTN_UpStart" runat="server"  style="height:20px; Width:20px; font-size:smaller;" value="↑" />
                        <input type=button ID="BTN_DownStart" runat="server" style="height:20px; Width:20px; font-size:smaller;" value="↓"  />
                    </div>
                </div> 
            </div>
 
            <div class="hrEnd">
                <div class="time">
                    <asp:TextBox ID="TXT_HrEnd" runat="server" MaxLength="2" Height="20px" Width="15px"></asp:TextBox>&nbsp;<asp:TextBox ID="TXT_MinEnd" runat="server" MaxLength="2" Height="20px" Width="15px"></asp:TextBox>
                </div>
                <div class="timeAdjustingButtons">
                    <div style="padding:0 0 0 0;">
                        <input type=button ID="BTN_UpEnd" runat="server"  style="height:20px; Width:20px; font-size:smaller;" value="↑"  />
                        <input type=button ID="BTN_DownEnd" runat="server" style="height:20px; Width:20px; font-size:smaller;" value="↓"  />
                    </div>
                </div> 
            </div>     
        </div>
 

 
.hrStart
{
 
}
.hrEnd
{    clear:both;
    padding:3px 0px 0px 0px;
}
.picker
{    height:auto;
    width:80px;
    border:solid 1px LightSteelBlue;
    text-align:left;
}
.pickerTitle
{    height:auto;
    width:80px;
    border:solid 1px LightSteelBlue;
    text-align:center;
    background-color:Silver;
}
 
.time
{    padding:0px 5px 0px 5px;
    text-align:left;
    position:static;
    width:50px;
    /*background-color:Yellow;*/
 
}
.timeAdjustingButtons
{
    padding:0px 0px 0px 0px;
    text-align:left;
    width:20px;
    position:relative;
    left:55px;
    top:-35px;
    bottom:-35px;
    /*background-color:Green;*/
}
#hrStart
{    padding:10px 0px 0px 0px;
    width:100%;
}    
#hrEnd
{    width:100%;
}
 

[drhowarddrfine]

Any way you can give us html out of that? It is hard to decipher.

EDIT: Never mind. I figured it out.

What problems are you having with the floats? It's usually IE that has float problems.

[drhowarddrfine]

It's hard for me to work with this because I didn't want to eliminate some things because I don't know what else is planned. It looks like you have a touch of 'div-itis', the need to wrap everything in a div, and there is a lot of unnecessary css. I had to stop what I was doing to go somewhere but this sort of does what you want. It can be simplified further.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
 
.picker
{    height:auto;
    width:80px;
    border:solid 1px LightSteelBlue; /* Not a valid color */
    text-align:left;
}
 
textarea
{    
    float:right;
    padding:0;
    text-align:left;
    width:20px;
    /*background-color:Yellow;*/
 
}
.timeAdjustingButtons
{
    padding:0;
    text-align:left;
    width:20px;
}
</style>
 
</head>
 
<body>
    <div class="picker">
            <div class="hrStart">
              <div class="time">
              <textarea rows=1 cols=5></textarea>
          </div>
                    <div class="timeAdjustingButtons">
 
                            <input type=button ID="BTN_UpStart" style="height:20px; Width:20px; font-size:smaller;" value="↑" >
                            <input type=button ID="BTN_DownStart" style="height:20px; Width:20px; font-size:smaller;" value="↓"  >
 
                    </div>
        </div>
 
    <div class="hrEnd">
            <div class="time">
                <textarea rows=1 cols=5></textarea>
            </div>
        <div class="timeAdjustingButtons">
 
                <input type=button ID="BTN_UpEnd" style="height:20px; Width:20px; font-size:smaller;" value="↑"  >
                <input type=button ID="BTN_DownEnd" style="height:20px; Width:20px; font-size:smaller;" value="↓"  >
 
        </div>
        </div>     
    </div>
</body>
</html>
 

[Frinavale]

It's hard for me to work with this because I didn't want to eliminate some things because I don't know what else is planned. It looks like you have a touch of 'div-itis', the need to wrap everything in a div, and there is a lot of unnecessary css. I had to stop what I was doing to go somewhere but this sort of does what you want. It can be simplified further.

Thanks for helping Drhowarddrfine!

I definitely have a touch of "div-itis". I'm quite new to CSS and especially quite new to <div> tags.

I'm finding it really challenging to get this stuff to work the way I think it should.
The problem I'm having with FireFox is that the floating tags are floating out side (and on top) of their containing <div>.

I've made the changes that you've recommended (removed those unnecessary <div>) but when I run it in FireFox they are still floating out side of the containing box.

Do you have any recommendations on how to fix this problem?
(I guess it was the original problem because that gapping thing was happening while I was trying to work around it)

-Frinny

[Frinavale]

According to W3C's articles on the topic of float:

• float: left The image or text will float to the left in the parent element
• float: right The image or text will float to the right in the parent element
• float:none The image or the text will be displayed just where it occurs in the parent element

If its supposed to float the element within the parent element, why do my elements always float on top of my parent element in FireFox?

CSS is a confusing place.
I'm starting to realize why I like doing the back end of things so much.

-Frinny

[drhowarddrfine]

I don't know that article but it may be in a certain context. Parent elements are NOT to expand to contain floated elements automatically, though we can make it happen. You may see IE do this but it is a bug in IE. This, along with a bazillion other bugs, are reasons why you should never use IE as the browser you design with. All versions, including IE7, are nine years behind web standards or incorrect in their interpretation of the standard. Always use a modern browser like Firefox or Opera as your reference for how things should work. Then we can adjust for IEs quirks and bugs because they are well known, documented and fixable (in most cases).

Once you get your head wrapped around it, CSS isn't that bad. It usually works just fine in Firefox and the only headache is getting IE to cooperate. When I was learning, the tutorial that really helped me was this one. You can gain a lot from this one too.

When people start thinking CSS, too many times they feel <div>'s are part of it and necessary, but divs are HTML and have nothing to do with CSS. They are only there to help with structure and the ability to manipulate their positioning is a bonus. So it's entirely possible to find and create pages that have no div elements at all.

Remember that any element can be positioned using CSS and you don't need it wrapped in a div to do so. I only use divs to keep related elements together so they won't interfere with other elements on the page.

[Frinavale]

I don't know that article but it may be in a certain context. Parent elements are NOT to expand to contain floated elements automatically, though we can make it happen. You may see IE do this but it is a bug in IE. This, along with a bazillion other bugs, are reasons why you should never use IE as the browser you design with. All versions, including IE7, are nine years behind web standards or incorrect in their interpretation of the standard. Always use a modern browser like Firefox or Opera as your reference for how things should work. Then we can adjust for IEs quirks and bugs because they are well known, documented and fixable (in most cases).

Working with a browser other than IE isn't so easy to do. I'm working with Visual Studio 2005 to develop an ASP.NET application. VS 2005 creates its own little "happy world" and everything always works perfectly until I move it to the web server and see the horror that has actually been created through another browser.

Every time I make a change I have to re-publish the website to my server in order to see it in another browser and this process is very time consuming. I'd love to start designing in Firefox and work my way backwards to IE and IE6 (*shivers*) because it seems like the logical thing to do.

Once you get your head wrapped around it, CSS isn't that bad. It usually works just fine in Firefox and the only headache is getting IE to cooperate. When I was learning, the tutorial that really helped me was this one. You can gain a lot from this one too.

When people start thinking CSS, too many times they feel <div>'s are part of it and necessary, but divs are HTML and have nothing to do with CSS. They are only there to help with structure and the ability to manipulate their positioning is a bonus. So it's entirely possible to find and create pages that have no div elements at all.

Remember that any element can be positioned using CSS and you don't need it wrapped in a div to do so. I only use divs to keep related elements together so they won't interfere with other elements on the page.

I'm going to check out the links you sent me! You've been a great help and have pointed me in the right direction (I've already started to remove my <div>'s). I've never done a project that needs to be quite so visually pleasing as this one and in the past I've always used tables to produce the look I wanted. I want to get it right this time and get away from tables.

Now that I'm starting to understand CSS a bit more, this doesn't feel so much like torture.

:) Thank you for the sound advice!

-Frinny

[sarahxclare]

I strongly disagree - IE is much better to build your website off. It's better to start off with IE because the changes you make in IE usually work the same for all other browsers.

Try your website in different browsers along the way - you usually don't have to change the coding if you base it in IE. But add extra codes that work for that particular browser.

Saves you basically re-doing your whole site.

[David Laakso]

I IE is much better to build your website off. It's better to start off with IE because the changes you make in IE usually work the same for all other browsers.

Nothing personal, sarahxclare, but that is a naive conclusion that belongs at the top of the list of worst possible best practice.

[David Laakso]

Could someone please help me get rid of this gap.

Dunno. There are at least a zillion probable causes. Could you put the page in question on a public server and point to it in your post to the forum so that those of us who are not too bright can have some idea of what in the world you are talking about, and perhaps eliminate some among the zillion probable causes for a gap...?

[Frinavale]

Dunno. There are at least a zillion probable causes. Could you put the page in question on a public server and point to it in your post to the forum so that those of us who are not too bright can have some idea of what in the world you are talking about, and perhaps eliminate some among the zillion probable causes for a gap...?

Thanks for trying to help Dave but I solved the problem over a year ago. I can't even remember the solution...but I was quite new at using CSS at the time.

I find it amusing how people have such strong opinions about web-browsers because I never favor one browser over another.

Since this thread I have figured out how to develop with multiple browsers....Visual Studio 2008 just checks which is the default and lets you debug with it. I typically just work directly on the web server so I can load up any browser without changing the settings.

What most web developers have to realize is that even though they have a preferred web-browser, your users may be using anything. When developing web applications I constantly jump between different browsers and never really "start in" IE, or FireFox, or Safari, or Opera....I just use them all.

I do however favor FireBug...a tool that lets you debug CSS, JavaScript and other web page issues.

There are tools out there for Safari and even one for IE (although this one needs to be improved upon a lot before I start using it regularly)

But really, don't start using one browser and move to another...just use them all regularly to check your web content.

[drhowarddrfine]

But really, don't start using one browser and move to another...just use them all regularly to check your web content.

This is still a naive method of doing things. You can't use Internet Explorer to make sure your markup is written correctly. If you do, and it shows what you want, you will be jumping around to other browsers trying to force them to work like IE. But IE is old, broken and non-compliant. So you would be trying to force your broken code to work in modern browsers. The point is, if you want to write modern code you have to test it first in browsers that understand and work properly with modern code. That has NEVER been IE and won't be true in IE8 either.

Plus, you show you don't realize that markup that works in the modern browsers (that is, not IE) will typically work everywhere and that markup written in IE will typically not work anywhere else. I know of NO developer that would use ANY version of IE as their initial test and THAT is where your humor at such things should disappear. IE8 will still be 10 years behind web standards.

Microsoft has publicly stated they wish their browser worked like the others. Never, ever, ever use IE to test your code for proper implementation.

Now what most Microsofties always hear in alll that is "Don't make your page work in IE" which, of course, I've never said. I'll repeat what I did say. You want to make sure your code is working right so check it in a browser that works right. Then you can look and see if IE botches it up (and it probably will). The hacks, quirks and bugs of IE are all well known and published on hundreds of web sites so it will be relatively easy to fix IE.

And for those who still don't get it: But it works in IE!

[David Laakso]

Thanks for trying to help Dave but I solved the problem over a year ago. I can't even remember the solution...but I was quite new at using CSS at the time.

What help? You got a uri for that page or not?

[Frinavale]

What help? You got a uri for that page or not?

I no longer need help with this issue since it has been resolved over a year ago.
I was probably just having problems because I was using so many <div> tags.

I would love to show off my product but it's a private web application that cannot be accessed through the web.

-Frinny