Sorry about the simple question..
do anyone know why my images on the button section of this page are not aligning correctly. the image on the far right seems to be pushed down. Doesn't anyone know what's causing this problem?
Link to Issue
You have a bunch of  's that aren't in tags. Looks like that seem to be the issue after removing them via Firebug. Remove them and it should line up.
There is a lot of white space after deleting it:
When I inspect the page I see extra html elements inserted into the document
</li><!-- ITEM ENDS HERE -->
<li class="item2">
The extra "nbsp"s are throwing off the alignment.
You need to remove any spaces or new line between </li> and <li>, so in the HTML mode of your CMS it should literally read </li><li> and not something like:
</li>
<li>
If that's somehow not possible, contact the developers / forum of your CMS and ask there for help.
This is not valid html. You need to fix that first. Run your page through a validator and correct the "Element div not allowed as child of element ul in this context" errors.
Lots of whitespaces above each <li>. Remove them and it should work fine. Use Chrome Developer Tools or Firebug to check 'em out.
Related
I need to hide a
</div>
without JavaScript or Jquery. I tried
<span style="display: none;"></div></span>
but it didn’t work at all.
Any help is much appreciated.
EDIT:
Thanks for confirming that it is NOT possible!
That’s what I wanted to know.
I solved my problem by changing my markup a little bit.
In my case it would have been logic because it simply would have saved some lines of code. (Basically I wanted to insert a div into another when a user activates an option, hiding just one closing tag and one new div opening tag when the option is disabled, showing them when the option is activated. It’s a tumblr theme with some closing tags rendered in {block:Posts} after every post. No need to get further in detail, i think it would be unnecessary complicated because the problem is already solved. Thanks!
I can think of absolutely no logical reason for doing this. even though a div tag may look like two elements to some, it is in fact one element and neither the starting nor the closing tag function on their own.
The fact that a
</div>
tag is being displayed suggests that you have an extra closing tag - there is no corresponding
<div>
opening tag. These tags should never be displayed on a page if implemented correctly.
Try looking through your code and checking every opening
<div>
has a corresponding
</div>
In html all tags must be in pairs, having one opening and one closing tag. e.g.
<div id "test">
Test text!
</div>
JP
This is a school project that I am working on, but there is something wrong with the Validation. I have images in the list, and I think that might be the problem. What should I do so that it validates correctly?
Here is a link to the live page.
http://noah-stahl.binhoster.com/bwm150/assignment_4/tech_history.html
Thanks!
Yes, the only valid child of a <ul> element is a <li> element. Put the images inside the <li> tags.
I would put them in div class to be a little more structure but that's just a personal preference.
I'm struggling to figure out why the li values are pushed below the li number in Safari and Chrome. It looks normal in IE and FF (all in a straight line). Please view the following in each browser to see what i mean:
http://jsfiddle.net/CfyQF/
I have tried to replicate this using tables inside the li rather than floating divs, but get the same result.
Anyone know why this is happening and how i can update my css or html or both to resolve this issue?
Thanks!
I spent some time trying to come up with a working solution without the floats and came up with the following, for anyone who needs this here it is:
http://jsfiddle.net/zeaHu/11/
I had a problem like that before.
It's the float that causes this.
You could get rid of the float property and work with margins and padding instead.
not sure if it solves your particular problem, but if you strip out all the css and most of the div's, the numbers line up beside the inputs and the 'X' still sits nicely to the right of the input;
<div>
<ol>
<li>
<input>
<button>x</button>
</li>
<li>
<input>
<button>x</button>
</li>
</ol>
</div>
Ok so there's a site i've been asked to look at and I can't seem to figure out why it only looks bad in safari. It looks fine in every other browser so far and I can't figure it out. The problem takes place in the footer of the document. Here's the link... www.palettekids.com (I SWEAR IT'S NOT MY DESIGN :-))!!! Thanks!
It looks like you have an extra </div> somewhere if you look at the source in safari it is outside of the #container. But in Chrome it is inside. The container is what is holding everything else in. Double check all your closing div's and remove the extra one.
Fix your code errors, like the missing ending tags, like </div>, </body> and </html> among other errors; probably all missing from footer.php. See [Invalid] Markup Validation of palettekids.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
I don't think coords are supported in Safari:
http://www.w3schools.com/tags/att_a_coords.asp
try using another method (margin perhaps)?
something driver me crazy here
i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find
<ul><li>something</li><li>something</li><li>something</li></ul>
but when i write it like this i got +4 pixel i don't know from where
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them
Any solution? css maybe
::Extra info
i found that the problem comes from closing and starting li tag this worked out
<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>
any idea ?
You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.
i would start by using a reset CSS like this one
I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.
What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.
There are two options available to deal with this (in addition to your first example):
<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>
(Note that the first two </li> tags aren't closed until the following line.)
<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>
Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.