a winnipeg website design company.
a winnipeg website design company.
While working on a client site this week, I came across a very strange bug that I just felt needed to be shared. It appears to happen when an inline element is within another inline element. The simple way to fix this error is to clump your elements together and avoid any line breaks or code indenting. Watch the following video for further information!
Gopal Raju Says:Nice Solution!
Gopal Raju
productivedreams.com
twitter.com/gopalraju
Praveen Vijayan Says:Thanks to point out this issue
This type of issue happen in ie when there is a gap between img tag and its preceding or succeeding element.
eg:
a white gap will show in ie between image and div. The following will eliminate this white gap.
Meshach Says:Thanks, this is very helpful.
shane sponagle Says:Cool tip. Don’t remember having this problem before, but now I am ready for it if it does show up. Thanks
Ian Says:You really probably shuldn’t convert the elements to inline, because then you lose all sorts of support for margins and padding. As well making your code clump up makes it less pleasant to work with.
A more elegant solution is to set the elements to Float: left/right and adjust from there. You can even set the list items to float and the anchors to display: block for maximum control.
The float option does have some of its own pitfalls, but as long as you apply them carefully and use clear: both on your contrainer blocks you will be fine.
Paperboy Says:I remember having these problems (with images) too. And it sure took a while before I found the solution!
Thanks for the reminder!
Snookerman Says:This is not a bug. If you have a line break or a lot of whitespace between inline elements, the browser will only show one space. That is why you should put anchor tags right after each other or image tags. If you make list items or divs act like inline elements, they will follow the same rules.
Snookerman Says:This is a better explanation maybe, if you put two anchor links after each other in a text, for example site site you expect the space between them to be rendered, and it is. If you put more than one space, or like in your example, a line break and some tabs, the browser will still only display a space and ignore the rest. It even happens in normal text. This:
hello hello
is the same as:
hello hello
You can try it in your examples, leave only one space between the problematic elements and you will see the same space.
This is definitely not a bug, it’s just expected behaviour that you have totally misunderstood.
Snookerman Says:In the above example I actually had a lot of space between the first two hellos and only one space between the second pair. The browser immediately ignored all spaces except one. Just as expected.
Brenley Dueck Says:Good tips snookerman… I don’t really have all the answers… but wanted to point out the problem anyways.
kevinMario Says:Use SHIFT+CTRL+J in Dreamweaver and ‘fold’ your code as often as you can, make sure spaces between the codes are all white (e.g no blue spaces)
The easiest way to do this is to fold your BODY tag and then inspect your code. The cleaner it looks the better it is.
I’ll post a screenshot to show you what i mean in a sec
kevinMario Says:Hope this could explain better :
http://www.lunarist.com/files/line_bug_solution.jpg
Then again I have to concur to one of the posters above for you just to set LI elements to float:Left and set the UL to overflow:hidden ( float container trick ) and everything should be sweet.
Joseph S. Says:Yeah, Snookerman, that’s what I thought immediately. When you leave a space in your code between inline elements it will be rendered as one space… just as if you placed a bunch of nbspc between them it would add extra spaces. It is the idea in our head of how li elements should behave as block level that would make this behavior unexpected.
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!