I have a table (I use it for my main layout) with a table cell that is only 20px high. The next cell is a rowspan of 2, that contains my main content. In firefox it isnt a problem at all. It stays at 20px (It's important because it is the bottom of the logo and just above the menu). In internet explorer, the cell decides not to stay at 20px high.
I am doing eveything I can think of (stylesheet, inline style and JavaScript). There has to be a way that I can keep it from resizing depending on the content of the page.
Here is the address of the page in question: http://www.rat-pack.com/Members.php
The issue is nothing you are doing wrong, it relates to how IE handles locations and table attributes
Try the following
http://www.quirksmode.org/js/detect.html
if you use JS to detect what browser is being run, you can create a custom style sheet for each, which is how you work around browser limitations
Best of luck to you
Related
I have a website that uses Jump Links to move between page elements (it's an interactive User Guide), and all works ok on Firefox, IE, and Edge, but Chrome and Opera ignore the 'padding'.
As the website has a fixed menu bar, this means the jump link location vanishes under the bar on Chrome and Opera.
The simple code I am using for the jump link offset is:
<a id="namexxx" style="padding-top: 100px;"></a>
What can I do to make this work with Chroma and Opera?
All the solutions I have been able to find via search do not answer the difference issue between the different browsers.
Cheers!
Padding isn't a suitable approach to repositioning an element in this way, because it would increase the size of the element itself. In the case of a link, you'd effectively be creating a larger link area, with the space above the link becoming clickable too.
You'd be better off using margin-top which would move the element down the page. Depending on the rest of your markup, you might need to set display: inline-block; on the link element too.
I'm working on a new website design and everything seems to be working on chrome, yet on internet explorer (only the newest version, it seems), there is a ton of white space added on top of the website.
Basically on IE, it almost looks like I had 500px of padding-top. But it displays perfectly on chrome.
The current URL is cspclaw.com
Thanks.
I posted the entire main page HTML here: http://pastebin.com/eDmfuRWK
And the entire main page CSS here: http://pastebin.com/GK3TRtx4
Seems to be an IE bug to me.
It calculates the height of the <tr> through the height of the contents of the highest <td>, disregarding the rowspan="2".
If you remove the rowspan attribute, you can kind of see why it's doing what it's doing.
The problem for IE is that every single <td> in your second row (the row containing the <div class="fadein">-cells) has rowspan="2". Remove that, and the page will no longer show that odd margin/padding in IE.
It still doesn't look the same, my guess is more rogue rowspans... :)
I've set up my site with a basic layout of 2 columns header and footer. On most of my pages this works as the left column isn't connected to the right. However on one page I've got a picture in the left column with an associated description in the right. Both of these elements will vary in height, but not width. Now, I got it to work by placing a div between the pictures clear-all with a set height to compensate for the difference on the right side. Looks good in the browser that I tested it with but when I did a final look using ie, chrome, opera, and firefox I found that each one is rendering the space differently. The height of the left column is not consistent so that the pictures don't line up with the description on the right. I would like to keep the 2 column layout consistent thru out my site. I there a way to compensate different browser renderings in this type of layout? Here's a link to the page, I launched it because I don't really expect much traffic yet. Thanks for any suggestions!
Craig
Different browsers render things differently (like default line heights, margins and font sizes of headings, and so on). To get everything to a common value you are supposed to use a reset.css. The most popular and what I am generally using in my projects is this one: http://meyerweb.com/eric/tools/css/reset/ . From what I can see on your website you are not using a reset.css. You need to grab a copy of that file (from the attached link), name it reset.css and import it before your actual style.css file -- in your case you have to import it before this rule: #import url("site_css/craig-smith.css");
NOTE: After importing the reset, you might have to adjust some of the original craig-smith.css, but in the end the rendering will look similar/consistent in all browsers.
I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).