I am using a wordpress template and everything looks fine in FireFox.
But- Surprise, Surprise - it looks wrong in Internet Explorer 8
On this page there are two issues:
http://www.thebuddhagarden.com/blog/
1) The search box (which is supposed to be to the right in the navigation menu) is pushed DOWN so that it is hidden behind the word Categories.
2) And (probably related) the navigation menu (which starts with Blog Home, Shop Our Store, etc.,) is supposed to be aligned to the LEFT. Looks great in FireFox, but it is aligned center in IE8.
No this is not a float issue.
I figured 2 issues in IE-7 its working fine in IE-8.
do the followings
1.Remove line height:18px from your h1 this will show your title which is mixing with navigation in ie7.
2.Put width:690px (or your desired, obv it should be less then 695px) on your <div id="navmenu-wrapper"> and things will be okay.
Internet Explorer doesn't like elements that are floated right following elements that are floated left. I'm not sure why this is, but for some reason it considers right floats to be new line right floats. You have two options here.
Put the box-search div above the navmenu in your code. This should not have any affect on other browsers - FF, Chrome, Safari, Opera - they will all display it as they do now. IE, however, will allow your right float to be on the same line as your left float, thus fixing the issue.
Or, give your navmenu a specific width such that it uses all but the space needed by search, and float both left.
Your problem is because of this property:
#navmenu ul {
margin:0 auto;
}
On line 656 of your styles.css stylesheet. You're trying to center a list when you want to float it to the left, so just change it margin:0 and you should be all set.
Related
I am having a cross-browser issue with the vertical alignment of a table-cell element. I can get it to look correct in Chrome, but not in FF or IE OR, I can get it to look correct in FF and IE, but not Chrome. See the mockup here: http://codepen.io/jphogan/pen/jaItL/
The wide, right text is a table-cell element. The reason I have it set up like this is so that, even if the text wraps the line, it will still be vertically centered with the colored background. You can double the amount of text on the codepen and see what I mean.
Here's my problem: if I set the .bpheader > .col to top:0; (like I believe I should), it looks correct on chrome (see here: http://i.imgur.com/sfugnvR.png), but is messed up in Firefox and Explorer (like this: http://i.imgur.com/Q2suc8f.png). If I set .bpheader > .col to top:30%; (or a pixel number), it lines up in FF and IE like so: http://i.imgur.com/A832zaa.png, but looks like this in Chrome: http://i.imgur.com/aYsh2Uv.png.
I've looked through dozens of threads here and I have tried everything I can think of with CSS (like: setting a height on the table element, moving positioning around, etc.) to get it aligned across all 3 browsers, but simply can't figure it out. Also, if anyone has any other ideas to keep the text vertically aligned even if the text wraps (must be compatible to IE8), I would LOVE to hear it. Thanks!
you can just create a specific CSS for firefox for the same class #-moz-document url-prefix() { .font_example {font-size:1.075em;} } -
Basically a product grid, which should be floated left.
Occasionally the last item is not floating left, why ?
Example here
http://bartels-sondermaschinenbau.de/Regale/Fachbodenregale-Lager/Stecksystem/
and here
http://bartels-sondermaschinenbau.de/Regalbau/
There is some js which is equalizing the box heights, which may be breaking things?
Somethings wrong, but i can't spot it.
It does not happen everywhere either, just to make it confusing
Example - where all ok
http://bartels-sondermaschinenbau.de/Werkstatt/Hallen-Aussenanlage/Material-Lagercontainer/
Doesn't work in FF 17.0.1 too. Add height: 201px to li without oxEqualized class.
Your code seems fine.
It looks like you have a zoom in your text, as pointed out by #lnrbob.
Press CTRL + 0 in Firefox, or follow View Menu in every browser and set zoom to 0, and retry...
this is my first post here.
I have Code for displaying the scrollbar on the left side of the div:
body
{
direction:ltr;
}
and
<div style="direction:rtl;">
and the text is still left to right
everything works great in IE
but in firefox and safari it displays still on right side
I'm not getting any issues in firefox. Have you considered:
1) using a class instead of a style via the div (ignore if you're just using style for example purposes)
2) using text-align, which has a very similar end result.
You should make sure you are using the correct Doctype, as IE might display incorrectly without the correct declaration.
I'm having a problem with a dropdown menu under IE (6 and 7).
http://www.amaconsulting.pl/promocje.html
As you can see, the dropdown hides behind the main content area in IE.
It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI
I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).
The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.
If someone could provide some advice, I'd be very grateful.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.
So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.
Updated:
So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.
I managed a z-index work around here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
IE does not use z-index correctly.
Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.
I'm having a couple of problems with this site. Actually it's my lack of CSS skills that is the major issue.
In any case, if you go to this page: http://winteradagency.com/Arvin/lifestyle/lifestyle.htm,
you'll see that in the center area <div id="centerInc">, I want some text (aligned to the right and bottom) to be on top of the image . So I've used a <p class="centerAlign3"> and another one <p class="centerAlign2">. It all comes out fine in Firefox and the others but not on IE6 or IE7.
Also the background image that is set to take up the entire browser window looks good in Firefox and the others but stops short on the right in IE6 and IE7.
I think I'm getting confused about the absolute vs float positioning among other things.
Any help would be greatly appreciated, I'm smelling rubber as these wheels are spinning.
Sorry, I opened the website in IE now, just add a simple left:0; to both of the text elements(centerAlign2, and centerAlign3) and it will work
Set position relative
(position:relative;) to the element containing the image, and
position absolute
(position:absolute;) to the text and also add (bottom:20px;
right:20px;) this represents the
spacing of the text inside the image.
You can use any value that you want, I
used 20px.