1

I feel like I'm losing my mind. I'm writing HTML and CSS for a webpage, and a gap appeared between two divs that I cannot get to go away (or get bigger, for that matter). I am viewing it in Safari 7.0.1 and Chrome 32.0.1700.77. The clues...

  • When using the dev tools to highlight elements, the gap highlights orange, indicating it's a margin.

  • According to the calculated CSS rules on the side, the margins are set to 0 for the furthest in div and its container div as well, but the gap remains.

  • Finally checked the console, and it reports "Unexpected CSS token: {" on two consecutive lines (95, 96).

  • In Chrome, the space remains, but the error message is no longer.

  • Ran the CSS through a validator...and there were no warnings or errors (except for "unknown vendor flags").

  • Tried the font-size: 0, removing whitespace between HTML elements, and making sure nothing was inline already (as far as I know).

Could there be some hidden/unprintable character or something silly I'm missing??

The important CSS is here, the rest is on jsfiddle.

#logo-banner-container {
    width: 30%;
    float: left;
}

#logo-banner {
    width: 95%;
    height: 430px;
    margin-right: 0px;
    font-size: 0;
    background-color: rgba(250, 250, 250, 0.4);
}

img#logo {
   width: 90%;
   height:  auto; /* Ensures proportional scaling of the image */
}

Code here

Note: Images have been commented out or replaced. No other changes were made

mbrauh
  • 85
  • 1
  • 8
  • Is this the gap you're trying to get rid of http://jsfiddle.net/j08691/dzq24/1/? – j08691 Jan 24 '14 at 01:26
  • You have 95% width set on #logo-banner causing the gap – davidpauljunior Jan 24 '14 at 01:28
  • Just tried to make the img a block (added display: block), as suggested here http://stackoverflow.com/questions/2953763/html-doctype-adds-whitespace, to no avail – mbrauh Jan 24 '14 at 01:30
  • @j08691 yes...what did you do?? (and sorry for forgetting to clarify!) – mbrauh Jan 24 '14 at 01:31
  • I think that comment was aimed at @j08691, but I think he just changed that width to 100%. (Or you can remove it as it's a div and therefore 100% width by default). – davidpauljunior Jan 24 '14 at 01:33
  • In my fiddle I just bumped the 95% to 100%. – j08691 Jan 24 '14 at 01:33
  • @davidpauljunior You're right, my bad. And yes, I changed the %, and it worked. Is the reason changing the margins has no effect because "width" only effects the content area? – mbrauh Jan 24 '14 at 01:33
  • Looks like @Tims beat you both to the official answer, and you both got it right, too. What's the courtesy to determine who gets the "approved" answer? – mbrauh Jan 24 '14 at 01:37
  • Give it to Tims, he's answered it. I normally just comment if it's a tiny fix. Changing the margins will have an effect if you remove that explicitly set 100% width. – davidpauljunior Jan 24 '14 at 01:39

1 Answers1

1
#logo-banner {
    width: 95%;

Removing the width setting will fix your issue.

Tims
  • 1,987
  • 14
  • 16