1

CSs for rate box:

 .rating-input { font-size: 25px; position:relative; left:101%; }

Button:

 .custom-input-button { text-align: center; position:absolute; left:64.4%; top:12.1%; }

image :

 <img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large" style ="position:relative; top:-46px; left:0px;"/>

It gives different look in chrome and firefox:

Image in chrome

Firefox:

Firefox

In chrome bookmark menu is not open. The change in spacing is due to that? I am frustrated changing the positions, but problem does not solved.

Improve this question
11
  • 3
    I would suggest making a Fiddle, with a basic example of the code you're using. You haven't given us enough information to be able to help. Commented Nov 15, 2013 at 10:24
  • @AdamBotley: These element are interconnected wit different js and function. SO I tried but in fiddle it does not give me sort of look in snap Commented Nov 15, 2013 at 10:46
  • 1
    You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers. Commented Nov 15, 2013 at 11:04
  • 1
    @cyclic Ok, if you want to use them. But only with % it will be tricky. Quick example. jsfiddle.net/Driveash/qgbLB You can also do extra css for specific browser. Commented Nov 15, 2013 at 11:45
  • 1
    @cyclic They could. Just position element according to wrapper that contains it. Commented Nov 15, 2013 at 11:58

3 Answers 3

Reset to default
1

I agree that your not giving us enough code to really give you a good response to.

If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.

That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.

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

Comments

0

Just to sum up conversation in comments.

You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.

Quick example of what babbling about in upper paragraph

jsfiddle.net/Driveash/qgbLB You can also make extra css for specific browser.

Are left and margin-left the same?

Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.

Improve this answer

Comments

0

add z-index:-999; to the image so it doesn't sit in front of the green banner

Improve this answer

1 Comment

what effect it created?