Beginner's query about CSS positioning

Question

I am trying to move the box by giving CSS selector for <div> a relative position attribute and some distance from left and top edge. Problem is it's not working.

Selector is clearly working because if I uncomment visibility attribute, the image is hidden. What's wrong here?

HTML:

<body>
  <div id="test_logo">
    <img src="http://uselessproducts.weebly.com/uploads/5/2/5/5/5255421/_6517253_orig.jpg" height="100" width="100"/>
    <span id="test_logo_title">test</span>
  </div>
</body>

CSS:

* { margin:0px; padding:0px; }

html {
    font-family: Verdana, "Lucida Sans Unicode", Arial;
    font-size: 9px;
}

body {
    margin: 9px 0 0;
    background-color: #f37062;
    font-size: 100%;
}

#test_logo {
    /*visibility: hidden;*/
    position: relative;
    left: 100 px;
    top: 200 px;
}

jsFiddle link

Thank you for posting the relevant code. Please do so every time you ask a question. — Alfabravo
– Alfabravo, Commented Oct 24, 2012 at 18:00
As an aside, zeroing out margin and padding on everything by using the universal selector (*) is pretty heavy handed. You may want to rethink that. — steveax
– steveax, Commented Oct 24, 2012 at 18:03
@steveax : not heavy handed, if done with intent and understanding of the implications. Personally, I prefer using some tested normalization css specs, such as the one used by html5boilerplate.com ... it can really smooth things out when trying to make things work well cross-browser. — Jason M. Batchelor
– Jason M. Batchelor, Commented Oct 24, 2012 at 18:27
@mori57 given the question title ("Beginners...") I thought it may have been done without understanding the implications. I'm a big fan of normalize.css (which HTML5 Boilerplate uses) but note that normalize.css doesn't employ the universal selector. — steveax
– steveax, Commented Oct 25, 2012 at 20:14

Nikola K. · Accepted Answer · 2012-10-24 18:27:09Z

6

You just need to remove the spaces before px:

#test_logo {
    position: relative;
    left: 100px;
    top: 200px;
}

edited Oct 24, 2012 at 18:27

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Oct 24, 2012 at 17:59

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason M. Batchelor · Accepted Answer · 2012-10-24 17:59:44Z

2

Take the spaces out of the left: and top: specs in #test_logo, and you should be right as rain.

answered Oct 24, 2012 at 17:59

Jason M. Batchelor

2,95119 silver badges25 bronze badges

2 Comments

contemplatingzombie Over a year ago

Wow, that was simple. Actually I just needed to delete space between 100 and px. Thanks.

Jason M. Batchelor Over a year ago

Yeah, that's what I was trying to get at, but Michal spelled it out better for you. Glad that fixed your issue!

ORION · Accepted Answer · 2012-10-24 18:00:18Z

0

Here is the modified CSS, I think this should fix your problem, you can adjust the padding of the #logo to meet your space needs from the top and sides.

* {margin:0px; padding:0px;}

html{
    font-family: Verdana, "Lucida Sans Unicode", Arial;
    font-size: 9px;
}

body{
    margin: 0 auto;
    background-color: #a37062;
    font-size: 100%;
}


#logo{ 
    padding: 5px;
 }

Heres the link to my fiddle http://jsfiddle.net/r9x5A/3/

But as the others stated, the problem you're having is the space between the numbers and 'px' in your css.

answered Oct 24, 2012 at 18:00

ORION

2,4313 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Beginner's query about CSS positioning

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related