List works using XML but not HTML, why? - html

My drop down menu works perfect in XML and not in HTML. Please view this fiddle for a visual presentation: http://jsfiddle.net/H8FVE/9/
If you hover your mouse over the MORE button, you will see that the drop down aligns fine. The code I use for the drop down bit is:
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
And some CSS:
#mega div moretopbar {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
I tried to change the <moretopbar> to <div id="moretopbar"> but it messed up the drop down completely.
Why is that? And how should I fix it so that I use HTML only? Feel free to update the fiddle if you choose to answer: http://jsfiddle.net/H8FVE/9/
Before you choose to answer I should note two things. Firstly, I am not familiar with XML, the above is a coding mistake that randomly worked for me (and someone pointed out it was XML), and secondly, is there a reason of why I shouldn't use it this way? For instance compatibility issues...

Your HTML is totally invalid. You are opening a lot of divs and not closing them all. That is why your design breaks when you introduce one more div.
Please fix your HTML. You can use W3c's Online Validator to see problems with your markup. Make writing valid HTML your habit, otherwise expect to get "strange" errors like this.
In this fiddle, I made the following changes:
Moved the ID to your <ul> and got rid of <moretopbar>:
<ul id="moretopbar">
Changed the selector to: #mega div #moretopbar.
It "works" because the ID is now on an ul, not a div - as I already mentioned, the browser cannot really identify which div is which because of the lack of closing tags. Unless you fix this problem you are very very likely to see other strange bugs with your current divs.
Edit: Also the following CSS rules need to be more specific than simply saying div:
#mega div {...}
#mega li.dif:hover div {...}
For example you can use a specialdiv class on the div you mean these rules for, and use .specialdiv instead of div in the rules.
Working jsFiddle Demo

You forgot to declare moretopbar as an id aka #moretopbar

Related

extending <a> elements to extend gradient nav bar to end of page

I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}

Why won't anything happen when I change margin values?

I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.

Header is messed up in IE 7-8

The page I am working on is displaying perfectly in Chrome, Firefox, Opera and Safari (in both Mac and Windows) except in IE 7 & 8. The header is suppose to look like this:
but in IE it appears like this:
before we were using position: relative; for our class container in our charity.css file, but i had to remove that as it was creating problems in IE w/ my drop-down menus.
Can someone PLEASE help me?! I am so out of ideas now :(
Here is the [page] (however, i would have to remove the link later) Any help will be highly appreciated!!
Edited: here is the jsfiddle: http://jsfiddle.net/walahh/QwFL6/ it's not exactly the same page...but hopefully you will get the idea.
The only change I can think of would cause a somewhat significant change in your markup.
Basically, I'm pretty sure that this has to do with float:left and float:right elements not being cleared. IE is notorious for incorrectly propagating the float property to elements which weren't intended to be floated. To avoid this - when floating - it is common to do something like this...
CSS:
.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }
And then doing this in your markup:
<div>
<div class="fl"></div>
<div class="fl"></div>
<div class="clr"></div><!-- This element stops float from going to unintended elements -->
</div>
This is ideally how you would position floated elements for cross browser support.
If reworking your markup isn't doable, you could try adding empty elements, with a clear: both; style, as the LAST SIBLING of floated elements. So...taking your ul#secondNav as an example you could try this...
<ul id="secondNav">
<li class="stuff"></li>
<li class="stuff"></li>
<li class="stuff"></li>
<li style="clear: both;"><!-- Leave empty --></li>
</ul>
So apparently the fix was pretty simple....i was making it way too complicated.
What I (also) didn't know was "In IE the z-index can not be higher than the contain element's z-index."
So I went back to the original file, where they had .container{width:940px; margin:0 auto; position: relative;} and left it as it is. Then added z-index values for the #header{.....; z-index:1; } and #mainNav{...; z-index:2;} And that took care of the...
hidden drop-down menu(s)
messed up header
here is the modified code: http://jsfiddle.net/walahh/QwFL6/3/
hope this helps someone :) and thank you everyone who took their time to read my post and help me.

Why won't my paypal button center in my page

So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.

IE: element does not move when :hover makes another element visible

I encountered a strange problem in IE 8/7 and I have gone through hell (and back) to reach a minimal test-case that demonstrates the issue...
Consider the following bit of HTML:
<form id="hover-test">
<fieldset>
<div id="hover">
<p>always visible</p>
<p class="hidden">Visble only on hover</p>
</div>
</fieldset>
<fieldset>
Please jump
</fieldset>
</form>
And this bit of CSS:
form { background-color:#f5f5f5; }
.hidden { display:none; }
#hover:hover .hidden { display:block; }
#link { position:relative; }
What it should do: On hover an additional paragraph becomes visible, pushing the next fieldset and all its contents down. (works fine in FF/Chrome/Safari/Opera)
What it does in IE 7/8: The paragraph becomes visible, pushing down the following fieldset. The link however stays fixed in place for reasons I can't fathom.
In the frustrating chase for a minimal mark-up that reproduces the problem (the effect vanished when I removed single lines of CSS from the original code, but my testcase could have them and still be fine... O_o) I identified at least three players working together here:
the fieldset: If I put everything in divs or in a form without fieldsets, all is well
the position:relative: Uncomment that line and voilá - link jumps.
the background color: This makes no sense whatsoever to me, but without this it works.
So, here's the question (apart from the implied "WTF?"):
Has anybody any clue on what is causing this behavior? And how to solve it? Or at least a hint into which of the many known IE issues I could look into to further test stuff?
Maybe I could come up with a way to bend the structure and...say... have the background-color on some additional wrapper div or something, but this seems... somewhat silly, and anyway, I feel as if not understanding this now will make things possibly very complicated down the road.
It was your comment about the position: relative that helped me solve it. That flagged me to think hasLayout! The issue seems resolved if you make sure both form and fieldset have layout set also (just giving it to the #link created the issue). One (among many) ways:
form, fieldset {zoom: 1}
See the working fiddle.
BTW: You should not have two #hover id's in your code. That should be set to a class (maybe it is just an error in your example, but I wanted to note it).