CODEWITHSUNDEEP
htmlcss
Nathan
Nathan

Reputation: 3

Why does the order of the element I'm defining in my .css file affect how it appears when rendered?

(See update below)

I have two files: a .css file, and an index.html document. The idea is to have a panel of buttons on the screen [for prototyping usability of a touchscreen interface] with each button assigned a particular position on screen (see the "margin-top" and "margin-left" tags in the .css file. Later on I'll be adding onclick functionality etc.

For now though, I am trying just to get them to display correctly on the screen. What's strange, is that the first element in the .css part (ie. the .aButton #....) is always displayed up at position (0,0) when displayed in the browser. eg. at the moment, button1 will be up at (0,0) but all the other buttons are in the correct places. If I change the css code, and move the button2 section up above the button1 section, then button1 is rendered in the correct place, but button2 is now at (0,0).

Would be very grateful for any ideas!

Here are the relevant parts: from index.html

<div id="buttonPanel" class="aButton">
            <div id="button1" class="aButton"></div>
            <div id="button2" class="aButton"></div>            
            <div id="button3" class="aButton"></div> 
            <div id="button4" class="aButton"></div>
            <div id="button5" class="aButton"></div>
</div>

from styles.css:

.aButton #button1
{
    margin-top: 262px;
    margin-left: 110px;
}

.aButton #button2
{
    margin-top: 24px;
    margin-left: 347px;
}

.aButton #button3
{
    margin-top: 32px;
    margin-left: 114px;
}

.aButton #button4
{
    margin-top: 524px;
    margin-left: 104px;
}
.aButton #button5
{
    margin-top: 392px;
    margin-left: 106px;
}

Update: Have updated Fr0zenFyr's jsfiddle with the whole html and css files and get an identical problem! http://jsfiddle.net/b4NYd/ It was silly of me not to include them both before, as I now suspect it's got something to do with the .aButton #buttonx {} definitions interacting strangely with the #buttonx {} definitions beforehand. I can manage to make the problem go away by merging the two, but I really would like to understand why this kind of problem occurs, as I'd like to use different classes later when prototyping different layouts.

Update: All sorted! It was my comments, argh!

Upvotes: 0

Views: 146

Answers (2)

btevfik
btevfik

Reputation: 3431

the problem is your comments. that's not how comments are written in css. you need to use /* notation.

do this 

 /* interface 1 */
 /* need to change all of these according to what numbers I've got in my logbook.*/

Upvotes: 1

ahnkee
ahnkee

Reputation: 145

Moving the order of the CSS, in your case, should not affect the output of your HTML elements. You can reverse the order of all css classes for your buttons and that should not affect anything.

Have you overridden any other css? Have you set the elements to inline-block perhaps, or as btevfik touched upon, are you using any positioning on the elements? Are you overriding your button css at a later point in your css file?

There must be some other issue elsewhere causing your buttons to move around the screen.

Upvotes: 1

Related Questions