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.
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'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
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 a div and the requirement on it is to move the scrollbar from the right side to the left side. I've accomplished this in FF and IE with a direction:rtl; css declaration. Safari and Chrome both seem to ignore this and still put the scrollbar on the right side. Is there a way to get it on the left side in both Safari and Chrome? Thanks!
(Also I cannot convince the people involved with this to have the scrollbar on the right side like it usually is, so I just need a solution to get it on the left.)
In lieu of a full-fledged JS plugin like jscrollpane, you could achieve the desired effect with a 'dummy' div and a few lines of JavaScript. This jsFiddle I whipped up shows the working effect:
http://jsfiddle.net/rtceC/
You may, however, want to add a few lines to register a scroll wheel event over the pseudo-scrolling content div and adjust scrollTop for the dummy (and thereby for the content itself) accordingly.
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)