1 reply [Last post]
SnowMann
SnowMann's picture
Offline
newbie
Last seen: 6 years 13 weeks ago
Timezone: GMT+1
Joined: 2014-02-27
Posts: 1
Points: 2

Hello,

I am hoping somebody has the time to check out my site: http://www.doggy-daycare.dk.

I am using Wordpress as CMS. In the top right corner I have added the following widgets: Socialmedia icons, some text and two buttons. My problem is that they are aligning differently when viewing the site in Firefox than in Chrome. Any suggestions why this is?

Secondly - how can i make them align on top of each other, so that the text is positioned over the buttons and socialmedia icons?

The CSS:

element {
    padding-top: 62.5px;
    padding-bottom: 62.5px;
}
header#masthead hgroup #header-sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
}

The HTML:

<div id="header-sidebar" style="padding-top: 62.5px; padding-bottom: 62.5px;">
 
    <aside id="text-2" class="widget widget_text"></aside>
    <style media="all" type="text/css"></style>
    <aside id="origin_button-2" class="widget widget_origin_button"></aside>
    <aside id="origin_button-3" class="widget widget_origin_button"></aside>
    <aside id="vantage-social-media-3" class="widget widget_vantage-social-media"></aside>
 
</div>

Thank you!

/Martin

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi SnowMann It looks like

Hi SnowMann

It looks like Firefox is getting it right here.
Chrome seems to be ignoring the float:right; on the "aside". No idea why, then floating the stuff inside left.

You might be beter off positioning the elements absolutely inside the header-sidebar to get a consistent result.