The website: http://epic.lexcorp.ca/capabilities
If you open it in Firefox and then in Internet Explorer/Chrome you should see what I mean, and this is in regards to the two areas below the content (View Our Projects and News)
I've been trying to figure this out for about 40 minutes now and I'm at a loss. Help is greatly appreciated.
It's only a CSS problem.
Add this to your CSS file:
.bottomBox .region {
overflow:hidden;
}
With help from BumbleB2na I noticed there was a at the front of one of the tags.
That helped, but didn't fix it completely. I then noticed that there was margin-top areas that were pushing down the boxes entirely, so I adjusted the values to the div wrapping container and changed them to padding.
Seems to be seamless in all 3 browsers now.
Related
I have a site that can be seen at gronenproperties . com
I am using a div with an id "contact-add"
and absolute positioning it in the DIV where I want it to be.
Firefox shows it fine for the most part, but it shifts when i resize the window, and different browsers and OS's seem to place it somewhere else entirely.
I have been out of the game for awhile when it comes to css and making things cross compatible...In my research, it says to make the parent div relevant and should solve issue.
Pretty sure Ive done that.
If someone could teach me old tricks, but new trick to me.
Id greatly appreciate it
Thanks
Put everthing in a div with margin: 0 auto; and width: 960; or width: 1120;
I'm working on a single page website with lots of floating divs all height:100%; - On smaller screens (like iPad) and in browsers like FIREFOX you can scroll horizontally to the side of the site and view empty space. This is driving me completely mad.
I have looked through other empty space questions but they're so specific that I can't see a correlation. I have nothing that would make the 100% body width break. Any advice is greatly appreciated.
Test Site is available at http://test.mysteryskin.co.uk/
Might be useful to say that it is unfinished
I was able to resolve the issue on FF by adding position:fixed; to the div with the class trailer. In fact I think the type of page you are trying to pull off will be better off if all of your non scrolling elements are fixed.
Not sure if that will help your iPad issue or not.
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
According to Browserlab, this page displays fine in everything but IE8 and under. IE6 I can certainly live without, but I'd really like to at least fix the issue in IE8.
See screen shot below illustrating the problem: It seems to me that the first column under the logo has a left-margin of 10px or so that is causing the third column to drop below.
Is this a common bug? Or do I need to post more info on the issue?
Any tips would be greatly appreciated!
This might work :
Take div class four columns and move it just after div id content.
Then apply this style to content :
width:960px;
Then this style to four columns :
float:right;
Let me know if this works.
Please have a look at http://bestofyoutube.com. Anyone who knows what I am doing wrong here?
Seems like the IE (version 7+8) put the menu a lot further down then what Safari/Chrome/Firefox do. The little pic I have to the right when people log is also completely thrown out of the normal standard in Internet Explorer (The others worked fine).
Screen shot on IE:
Appreciate any help I can get. Thanks!
Interesting bug in IE. To be quickly fixed you need to add in your stylesheet.css this code:
body {
margin-top:0;
padding-top:8px;
}
In good to iterate over the options with top padding, removing it from the body.
I think IE tries to draw invisible borders for your menu table.
Try to disable borders for this table.
And don't forget about table cells padding/margin.