Why aren't these DIV tags reacting independently of each other.

#1 HDRebel88

Group: Gold Members
Feedback: 0
Posts: 1,674
Joined: 09-July 06

Posted 25 January 2010 - 08:10 PM

I don't get why this is happening.

page:

<div id="mainrow" class="tab1">
<a href="#" onclick="toggleRow('live')" ondblclick="location.href='link1.htm';">Live 

Sound</a> | 
<a href="#" onclick="toggleRow('recording')" 

ondblclick="location.href='link1.htm';">Recording</a> |
<a href="#" onclick="toggleRow('guitars')" 

ondblclick="location.href='link1.htm';">Guitars</a> | 
<a href="#" onclick="toggleRow('basses')" 

ondblclick="location.href='link2.htm';">Basses</a> | 
<a href="#" onclick="toggleRow('drums')" 

ondblclick="location.href='link3.htm';">Drums</a> | 
<a href="#" onclick="toggleRow('keyboards')" 

ondblclick="location.href='link1.htm';">Keyboards</a> | 
<a href="#" onclick="toggleRow('dj')" ondblclick="location.href='link1.htm';">DJ 

Gear</a> | 
<a href="#" onclick="toggleRow('lighting')" 

ondblclick="location.href='link1.htm';">Lighting</a> | 
<a href="#" onclick="toggleRow('accessories')" 

ondblclick="location.href='link1.htm';">Accessories</a> | 
<a href="#" onclick="toggleRow('books')" 

ondblclick="location.href='link1.htm';">Books & DVDs</a>

</div>

<!-- Rows -->
<div id="blank" style="display: block;" class="tab2"><p class="tab3">The on-click 

link to the right will trigger how this menu operates. In on-click mode, click once 

to pull up the sub-menu or double click to go to the categories page.</p></div>
<div id="live" class="tab2"> Mix Boards | Sub link 2 | Sub link 3 </div>
<div id="recording" class="tab2"> Recording Software | Sub link 2 | Sub link 3 </div>
<div id="guitars" class="tab2"> Electric Guitars | Sub link 2 | Sub link 3 </div>
<div id="basses" class="tab2"> Electric Basses| Sub link 2 | Sub link 3 </div>
<div id="drums" class="tab2"> Acoustic Drums | Sub link 2 | Sub link 3 </div>
<div id="keyboards" class="tab2"> Keyboards | Sub link 2 | Sub link 3 </div>
<div id="dj" class="tab2"> Turntables | Sub link 2 | Sub link 3 </div>
<div id="lighting" class="tab2"> Fixtures | Sub link 2 | Sub link 3 </div>
<div id="accessories" class="tab2"> Cables| Sub link 2 | Sub link 3 </div>
<div id="books" class="tab2"> Sheet Music | Sub link 2 | Sub link 3 </div>

css

.tab2{
background-color: #088A08;
color: #FFFFFF;
width: 1000px;
height: 22px;
display: none;
}
.tab3{
text-align: center;
margin-top: 5px;
font-size: 11px;
height: 12px;
}

Why is the second bar reacting the way it is? Logic tells me that tab3, should float the text down 5 pixels while not affecting tab2 at all. But whenever I do margin-top in tab3 it creates a space between the top bar (tab1) and bottom bar (tab2). Tried a <div> in place of the <p>, even tried <span> all do the samething.

Reacts the way I thought it would in IE7, but every other browser, FF, Chrome, IE8 all react as if I put a margin-top: in the css of tab2.

Promote to Article
Back to top of the page up there ^

#2 Zarel

I defy waffles.

Group: Admin
Feedback: 0
Posts: 2,524
Joined: 21-May 05

Posted 26 January 2010 - 05:12 AM

Do you have an example URL? Would save me a bit of time having to try the code myself. :/

Promote to Article
Back to top of the page up there ^

#3 HDRebel88

Group: Gold Members
Feedback: 0
Posts: 1,674
Joined: 09-July 06

Posted 26 January 2010 - 07:18 AM

Zarel, on 26 January 2010 - 05:12 AM, said:

Do you have an example URL? Would save me a bit of time having to try the code myself. :/

sorry,

http://makethemovieh.../menu_test.html

Promote to Article
Back to top of the page up there ^

#4 malcomhfc

Group: Gold Members
Feedback: 0
Posts: 353
Joined: 03-April 09

Posted 27 January 2010 - 10:28 AM

Make a second css file, one for IE (doom die!!!) and one for the rest of the browsers. Just add a if statment in head of html file to call the internet explorer css file if using that browser.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Promote to Article
Back to top of the page up there ^

#5 HDRebel88

Group: Gold Members
Feedback: 0
Posts: 1,674
Joined: 09-July 06

Posted 27 January 2010 - 04:17 PM

malcomhfc, on 27 January 2010 - 10:28 AM, said:

Make a second css file, one for IE (doom die!!!) and one for the rest of the browsers. Just add a if statment in head of html file to call the internet explorer css file if using that browser.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

I'm eventually doing that anyway, to fix the other problems in IE7, but that doesn't solve my problem of why it's happening in FireFox, Chrome, Safari, IE8, ect. I want the second green bar to be flush against the first one, and not have any white space between them. Currently it looks proper in IE7 and is messing up in every other browser.

Promote to Article
Back to top of the page up there ^

#6 pecky

Dr. Bob will eat you

Group: Gold Members
Feedback: 0
Posts: 2,004
Joined: 18-August 08

Posted 27 January 2010 - 10:11 PM

Huh?

I see it as normal on my firefox?

Promote to Article
Back to top of the page up there ^

#7 HDRebel88

Group: Gold Members
Feedback: 0
Posts: 1,674
Joined: 09-July 06

Posted 28 January 2010 - 12:19 AM

pecky, on 27 January 2010 - 10:11 PM, said:

Huh?

I see it as normal on my firefox?

Yes, after you click one of the links it's not a problem. It's when it first opens where the text in the sub-bar says "The on-click link to the right will trigger how this menu operates. In on-click mode, click once to pull up the sub-menu or double click to go to the categories page." there is a white line between the two bars.

Posted Image

Promote to Article
Back to top of the page up there ^

#8 Zarel

I defy waffles.

Group: Admin
Feedback: 0
Posts: 2,524
Joined: 21-May 05

Posted 28 January 2010 - 03:51 AM

Found it.

In here:

http://makethemoviehappen.com/css.css

Change this:

.tab3{
text-align: center;
margin-top: 5px;

to this

.tab3{
text-align: center;
margin-top: 0;

Promote to Article
Back to top of the page up there ^

#9 HDRebel88

Group: Gold Members
Feedback: 0
Posts: 1,674
Joined: 09-July 06

Posted 28 January 2010 - 05:37 AM

Zarel, on 28 January 2010 - 03:51 AM, said:

Found it.

In here:

http://makethemoviehappen.com/css.css

Change this:

.tab3{
text-align: center;
margin-top: 5px;

to this

.tab3{
text-align: center;
margin-top: 0;

Right, I know that's causing it, but I don't get why. I'm trying to drop the text down by 5 pixels over the bottom green bar, so it's not aligned to the top the bar, but center horizontally and vertically.
That's why I have the tab3 <div> inside the tab2 <div>. I'm using tab3 to establish positioning of the text and tab2 to establish the green bar.

The problem with using any positioning elements (relative and absolute), is the text ends up floating when the page is resized. The only thing I've found to move properly with the page when being resized is to use margin-top and margin-left.

Basically the text is where I want it, I just need the bar to come up 5 pixels and leave the text where it is.

Promote to Article
Back to top of the page up there ^

#10 Zarel

I defy waffles.

Group: Admin
Feedback: 0
Posts: 2,524
Joined: 21-May 05

Posted 28 January 2010 - 06:10 AM

HDRebel88, on 28 January 2010 - 05:37 AM, said:

margin can extend outside of the containing element. There are a bunch of weird rules about how that can happen that I don't care to memorize. Just remember this simple rule: Padding is safter. Adding padding-top:5px to .tab2 is always safer than adding margin-top:5px to .tab3 (if you don't want to do that, 1px of padding for .tab2 is enough to prevent the margin from extending outside of it).