I am having a problem with IE. The url to my site is www.trecall.com. I want to put a margin on the left side of the animated menu, to make the menu centered on the page. This works fine in FF, but in IE, the margin does not show up.
Any idea why?
THANK YOU!!
You can try wrapping it in another div and using padding on that. IE is not very good with margins.
Playing with left margin is not the correct way to do horizontal centering, it'll only work on your own display resolution..
see this for horizontal centering in css (old but still correct)
Related
I am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
A sign up page on my site is giving me trouble this evening. It shows up fine in all of my macbook pro's browsers(FF, Chrome, Safari), but when I view it in FF on a PC it seems the page somehow breaks- the horizontal layout becomes vertical. Any ideas why this may be?
Viewed in FF on macbook pro-
Viewed in FF on pc-
If this site is online maybe you could post a link to it, also it would be useful if you could post the html and css.
I'd put the left hand content and right hand content in 2 divs with say the left div 40% and the right 50% then float the left div left and the right div right. Alternately you can absolute position the divs.
Please try to remove position:absloute; for left and right div's. it will work. position is not required any way your make float left and right for two div's with proper width so position is not required.
Yes because of position:absoulte; only the problem occurred. try to remove position.
So I'm making an auto-complete dropdown list, using javascript. It works fine in IE8+, Chrome, and Firefox, but the alignment is off in IE7.
Here's how it's supposed to look, and here's how it looks in IE7. I've uploaded the HTML here.
Any help would be greatly appreciated.
just add left: 0; to .autocomplete_completionListElement — you have an absolute positioning here and IE thinks that it still must be on a line with previous content, so you need to set left to make IE know where the div must be positioned for sure.
I have navigation bar in my website that makes the links work properly everywhere. But when on Safari, for some reason the links are not clickable unless you highlight the empty space above the option. I diagnosed it further to find that I was adding a negative margin-top for the searchbox to align it properly with the options, when I removed that margin-top, the links were clickable. Any ideas?
You could use a z-index and position:absolute to make sure your navigation Div is on top. thats more than likely what the problem is.
Try that... add
z-index:100px;
position:absolute;
to your navigation in css.