I have two CSS files,
pic off the problem:
this pick shows no caps in the css. the css you see in the first pick is not that of the menu but that does not matter seeing it affects all css.
1: is the original
link
2: the copy
link
IE problem only
now my problem is that they do not act the same way as you would expect. the original shows the content as you would expect. the second does not show the drop down menu as it supposed to do.
the second thing is that if I look at the CSS on the in the browser it self than the original is all lowercase and the copy the tags are capitals. with seems to cause some of the trouble.
things I have checked:
DOCTYPE
ID
Classes
structure
style tag vs .css
HTML
original:
<div style="margin-left: 50px;">
<ul id="menu">
<li>Login </li>
<li>Help
<ul id="help">
<li>
<img alt="" class="corner_inset_left" src="corner_inset_left.png" />
General help
<img alt="" class="corner_inset_right" src="corner_inset_right.png" />
</li>
<li>Posts</li>
<li>Pages</li>
<li class="last">
<img alt="" class="corner_left" src="corner_left.png" />
<img alt="" class="middle" src="dot.gif" />
<img alt="" class="corner_right" src="corner_right.png" /> </li>
</ul>
</li>
</ul>
<img alt="" src="menu_right.png" style="float: left;" /> </div>
Copy http://pastebin.com/qsdz7pnj
Files are different - at least the second one contains additional min-width: 130px; in #menu li style. Also #menu li ul has different color set in those files. Maybe there's something more, haven't looked further.
As Sergey Kudriavtsev says the files are different. The most significant potentially being:
Original:
#menu > li {
"Copy":
#menu li
And there is this again somewhere else. This is changing the selector and thus potentially what elements the style is applying to.
Are these files meant to be the same? The fact that you call them a copy makes me think they are but they are quite clearly not which makes me wonder if the underlying problem is just how they got to be different in the first place...
The way to solve the CAPS in the CSS is a simple meta tag in the head.the caps in the script came from Quirks-mode. to stop the IE browser to use this mode use the meta tag shown here
<!-- Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
I'm using the jQueryUI accordion widget to provide the functionality I need. I'm not that familiar with IE tweaks so the solution escapes me.
If you visit my test site, try to expand the categories using a modern browser such as Firefox, Opera or Chrome. It works as intended.
However when using IE8, the category tree moves to the left a bit, and there is even some bigger separation between the categories themselves.
What can I do to fix this bad behavior?
(Note: Forget about IE6,7 support, it just has to work, not look pretty. )
remove width from categories class, tried in ie8 and problem disappear
You have poorly formed HTML5 markup. That might not be helping. The number of list elements you have is real long so I'll just give a snippit.
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />CCTV<p class="subtext">Circuito cerrado de televisión </p></h3>
<div>
<ul>
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />Camaras<p class="subtext"></p></h3>
<div>
<ul>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
On the 7th and 11th line above, you have UL tags but then proceed to use DIV tags. UL tags can only have LI elements as a child per W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html
I think your HTML could be closer to this:
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<ul>
<li>
<h3>CCTV <b>Circuito cerrado de televisión</b></h3>
<ul>
<li>
<h3>Camaras</h3>
<ul>
<li>Camaras Infrarrojas</li>
<li>Profesional</li>
</ul>
</li>
Though, there's probably better semantic use of tags possible than what I've got here.
You can then add a little padding to the left of your H3 > a tag and use the +/- gif as a background image that can be swapped with a CSS class. That will make the swap real straight forward in jQuery to simply toggle the clicked anchor class. That will help solve the previous bug I mentioned.
I hope that helps a little as Yucel seems to have a solution for the other issue, but there might be more going on with the HTML issues.
Cheers!
I am creating a simple(ish) website for one of my iPhone apps using the Twitter Bootstrap project. I have created a full website with this and found it quite easy to use but I am having some issues media-grid.
I am trying to achieve a row of 3 images using the media-grid class. The images are 280px in width which gives me 840px in total. The container is 940px wide so I have 100px grace to use for padding etc. I am finding this extremely difficult to do as when i view the site it puts two images side by side then the third on the next row. Some anomalies are showing up though, which are;
When I publish the index.html and associated css file via FTP the website displays the images with two side by side then the third image on the next row underneath the first.
When I preview the website in 'Coda' (the editor on Mac I am using to write the html and css) the website looks exactly how I want it too with all 3 images side by side in one row.
I have tried a number of things;
I have tried editing the .media-grid styles in the CSS and it doesn't seem to make a difference to how the site looks. Even if I had massive margins or padding it doesn't alter for some reason?
I have tried putting my own id onto the media-grid class for the three images then styling then myself which also has no impact on the visuals.
I have used the following code to insert my images;
<div class="container">
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>
Am I missing something in the CSS? I am not fluent with CSS so it is possible I am overlooking something? Any help would be appreciated.
To get the default styling to work correctly you need to wrap the <li>s with an <a href>.
e.g.
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.