Ran into a really weird problem and hopefully somebody can help...
I have a few rows of inline-block elements stacked on top of each other, so that they all merge into one guitar fretboard. On web/desktop, there is no visible line break (they are merged well). However on mobile, you can see a line break, until you zoom in all the way. Here are some pictures:
This first pictures shows the line breaks. I don't want these.
This second picture shows the line breaks disappearing when I zoom in further. This is what I would like.
Does anybody know why this happens? How can I fix it? I would prefer not to have to recode everything and step away from this inline-block element approach, but if I have to I will. I figured out a temporary work around which is to stick a background-color of brown behind the entire fretboard div, but the light line breaks will show up for anything that's not brown.
Related
Is there a way to leave a blank space incase a word is too long and breaks into 2 lines?
It's kinda hard to explain, please take a look at my screenshots
What it's like right now:
What I want it to look like:
You can see how the line break messes up the horizontal layout and I'm looking for a way to prevent that.
Adding a min-height to the product-title div worked out as suggested. Thanks!
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
How do I fix this navigation bar?
I tried making it on my own but I just can't get everything to work.
This is the button in all three states:
The red background is #490000 and it should be a separate div.
The text on top of the buttons is a custom font but that doesn't matter in this case.
I've thrown together a working sample you could study. Can you elaborate on where you had issues so I can explain the solution?
I'm trying to get familiar with CSS but some of things that are happening seem rather arbitrary.
For example:
http://jsfiddle.net/stapiagutierrez/48yGU/24/
Why is only the first and second divs displayed (playerinformation and centerad), but not the third one? I thought divs were stacked vertically unless told otherwise via floats or what have you.
Any suggestions?.
I just want three div, organized horizontally within the middle vertical div called middle.
My guess is #rightad is being removed by Adblock, or an equivalent. That's what's happening for me. If you disable your adblocked, I bet it will show up.
All worked for me (in Firefox), then installed AdBlock and the #rightad disappeared. Disabled adblock for the page and it reappeared again.
Alternative quick test would be to try your jsfiddle in a different browser and see if its all there.
I'm having a weird problems with one of my Arabic sites.
See that gray rectangle with the red heading in the homepage? right underneath it shows up a horizontal gray border in IE8 that I just couldn't get rid of unless I remove the border under the black headings below, which I don't want to do.
There's even an extra space between those two elements that's not supposed to be there. You can view the page in Firefox vs. IE8 to see what I mean.
Any idea how can I fix this?
Your help is much appreciated :)
there's a duplicate h2 under the episode_summary producing in ie8.
u should try validating the site first. http://validator.w3.org/