1

I'm having a host of problems that I have managed to work around until now.

First, different browsers are responding to different media queries even though they are all being displayed on the same screen. I've managed to work around that problem but now I'm stuck. I have an image that is acting up in Chrome and Firefox. If I fix it in Chrome, it gets out of line in Firefox, if I fix it in Firefox, it breaks down in Chrome.

Right now it is broken in Firefox, since it is easier to try to fiddle with it with Firebug than Chrome. I have tried using vendor specific prefixes, targeting Firefox with Javascript, rewriting media queries--nothing works.

I've never heard of browser windows using different media queries on the same screen, and neither have any of the other folks I've asked. I'd appreciate any help. You can find the problem at www.rachelbrent.com/#about and if anybody looks at the CSS (it's a mess, I know) it's in the base.min.css file and the div in question is img_place_about.

Edit to clarify: It's my image in the "About" section (I'm having some other image issues in the slider up top too. The whole thing is a mess) As far as code goes this is the HTML

<div class="fullWidth darkStyle" >
  <div class="container" >
    <div class="separator_mini"></div>
    <div class="nine columns" >
      <div class="mini_description">
        The first time I ever saw HTML I was in middle school and I was trying to figure out how to make a trail of planets follow a cursor around a page about the solar system. My main reference was a Geocities page that used Comic Sans liberally and catered to the Lisa Frank crowd. Yikes.</br>
        <div class="separator_mini"></div>
        Fast-forward ten years. I’ve earned an undergraduate degree from the University of Georgia in Advertising/New Media and I’ve almost completed my master’s in Interactive Media from Elon University. I’ll graduate this May, and I’m ready to take on the world. </br>
        <div class="separator_mini"></div>
        I’ve been lucky to have a wide range of digital communications experience, but I like to think of myself as a design minded strategist.
        <div class="img_place_about" >
          <img src="images/about_image1.jpg" class="scale-img "  >
          <div class="overlay_about social" >
            <ul class="social_bookmarks" >
              <li class="twitter_white noMargin"><a href="http://twitter.com/rbrent" target="_blank"></a></li>
              <li class="facebook_white noMargin"><a href="http://www.facebook.com/rachel.brent" target="_blank"></a></li>
              <li class="gplus_white noMargin"><a href="https://plus.google.com/118253125375848607885/posts" target="_blank"></a></li>
              <li class="linkedin_white noMargin"><a href="http://www.linkedin.com/in/rachelbrent" target="_blank"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="sixteen columns" >
      <div class="mini_description">
        I combine my educational background with my work history in public relations, project and social media management, and event coordination to make sure every project gets the most out of its digital content. The best strategy works in concert with good design though, and I always keep that in mind whether working with a team or leading one.  </br>
        <div class="separator_mini"></div>
        I get a thrill from outside the box problem solving and if you’re interested to hear more about that, I’d love to chat. Scroll over my picture to connect now, or check out the rest of my work and drop me a line at the end. Either way, I can’t wait to hear from you. </br>
        <hr>
      </div>
    </div>

And here is the CSS

Original:

.img_place_about {
  display: inline;
  float: right;
  margin-left: 48%;
  margin-top: -35;
  padding: 0;
  position: absolute;
}

Targeting Firefox:

@-moz-document url-prefix() {
  .img_place_about {    
    display: inline;
    float: right;
    margin-left: 17%;
    margin-top: -25%;
    -moz-margin-top: -25%;
    padding: 5px;
    position: absolute;
    width: 40%;
  } 
}

Problem Code:

.img_place_about {
  display: inline;
  float: right;
  margin-left: 17%;
  margin-top: -40%;
  -moz-margin-top: -25%;
  padding: 5px;
  position: absolute;

And what the code should be for Firefox:

.img_place_about {    
  display: inline;
  float: right;
  margin-left: 17%;
  margin-top: -25%;
  -moz-margin-top: -25%;
  padding: 5px;
  position: absolute;
  width: 40%;
}

Hopefully that helps. I know it is a rambling mess.

4

0 回答 0