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.
Related
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
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.
I am struggling with the header of a website template displaying in Internet Explorer.
http://www.furnituremind.co.uk
The search field and button are not in the same place on IE8+ but are in every other browser. I have tried everything and researched issues with IE float CSS property but can not make any progress.
Do I need to specify a completely different CSS sheet for IE8 just to get it positioned properly?
My suggestion is, instead of floating the nav right, position the nav absolute. Set top and right properties to adjust where you want it to line up.
see jsfiddle
http://jsfiddle.net/kuT9K/1/
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)