I have this CSS Menu. It's fully functional.
But when I put it in my page inside some table cell, it blows up like this. Don't mind the silver and the blue lines, they are from the page.
Now I have debugged the page and the menu itself. No error still this weird behavior. Then I got another menu and put that in here and it showed the same error. Any idea why is this happening?
I could paste the code but I don't think anybody is going to go through 500 lines of HTML and 100 lines of CSS.
I am using the latest Firefox. IE6 shows the same behavior.
check the code here...
CSS Menu Independent in a page
CSS Menu Inside a complex page
Your "in-place" stylesheet is much longer than your "minimum" one, and contains rules that are changing the layout. In particular, do a search for "280" -- you're setting some widths to that.
In some browsers, tables get some default styles that are not what you expect. I can't recall right now, but I think one of them was align="centre" by default.
Maybe try setting the table attributes to what you want them to be explicitly?
W3Schools for table attributes.
Related
I have an application with a number of buttons in various places.
In IE only, I have noticed that most of the buttons turn blue when you mouse over them, but not all the buttons.
So, two part question:
What is causing them to turn blue? I have tried many searches to figure out who is actually doing this , but apparently I am not choosing the correct search terms. Can someone give me a hint that will get me to the right place, so that I can research the answer to my second question:
Why would some buttons not turn blue? Once I figure out who is doing this, I am hoping I will be able to understand how I have managed to create some buttons where this doesn't happen, but if anyone happens to have any clues, they would be gratefully appreciated.
I'm not sure why they are turning blue.
But every browser has a default style for html elements. So, thats why it might look different in a different browser.
Its a common practice now to have a CSS reset as the top level CSS file.
I would google HTML reset or HTML5 reset. What this CSS reset does is make a style for every HTML element and applies a default style.
So, that your styles will look consistent across every browser.
for some reason my checkboxes will not work inside some divs.
They cant be checked and are around half the size they normally are...
They work in firefox, but not chrome and they dont even show in safari...
This is not a live site so cant give a link, but its just a basic checkbox code.
I have had a look around the css of the containing div etc but nothing seems out of place.
Any suggestions on what i could look for? Sorry if theres a lack of information.
Take a look at the computed style tab in the source view of chrome by pressing f12. You can then see all the styles that are applied to it and also add new styles. Experiment with it till you get the wanted result. Also, you can use jsfiddle.com for posting bigger blocks of code.
Cheers!
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.
I'm adding a drop down menu bar to my blog using html & CSS.
The code is from My Blogger Lab with tweaks to color etc.
My test site is: http://practicedailygratitude.blogspot.com/
I'm 100% happy with the way it looks in Chrome & Firefox (drop downs are really only for About, Images, and Home DIY; the rest are just links).
I'm having the following issues in IE (I tried 7, 8 and 64-bit):
In Explorer, the drop downs are showing up with almost a transparent background (I can see the post's text behind them)
In Explorer the drop down happens so quickly that I can't hover or pick a choice.
In safari, links aren't active and the drop downs down appear on the hover.
I've been searching for two weeks and trying different tweaks & suggestions from other posts but I don't know how to make it work in IE.
I don't use IE, but 30+% of her blog followers do, so I need to make adjustments, I'm just totally out of ideas (and I've reached my competency) at this point.
I've been able to adjust the code to get it exactly how I want it (with the drop downs hovering over the flag banner in the header) in Chrome & Firefox.
Note: This code requires the html gadget to be put at the top of the blog post section, not the header, so that's why I've changed some margins etc. to get the drop downs to move and "look right" with the header image behind it.
Here's what I'm seeing:
The theme is SIMPLE from Blogger by Josh Peterson. It's one of the few choices in Blogger ---- I haven't modified it; I'm only modifying through 1 html widget I added above the post section and then there is an advanced CSS tab for the template ---- that's where I went to Advanced and then "add CSS" and added the CSS from My Blogger Lab (only updating the colors and moving so it would overlay the header) ---- it appears that the CSS then adds itself in the SIMPLE template.
html for widget: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html
CSS: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html
Simple template in Blogger http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html
I took a look at your code and it first needs to be cleaned up. By cleanup, I mean syntax errors in your markup: http://validator.w3.org/check?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
There are quite a few errors here which might be causing the issue you are experiencing.
If you still see the problem after the cleanup, you should probably approach it as a regular z-index issue on IE7. This can be solved if you put position: relative; and z-index: 500; on all the parent elements that contain the menu. So, go div by div and add the position and z-index rules. Since your menu has a z-index value of 500, its parents must have a defined value for that rule as well, which needs to be equal or greater than the child element - in this case the menu. This will solve the issue with the menu going behind the content (I already tested it on the current state of the site).
On a side note, you have the following tag declared on your page: <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>. What this does is force Internet Explorer 8+ to render the page using the IE7 compatibility mode. I think you want this tag removed.
Let me know if this helped you out.
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx