I've been working on this site for quite a while, and I've finally got it looking pretty nice I think. But I've noticed a problem with the home page on IE8 (no other browser has this problem that i've used)
in IE8, the site looks like this:
Notice the blue bars on the sides of the far right column, they show how wide the <td> is. the content within is 160px as it should be, but the <td> itself is wider than it should be. As you can see in the HTML analyzer on the left, the width is set to "160", however the HTML in the page says:
<td style="width: 160px;max-width:160px"width="160px"align="center"valign="top">
Out of Desperation I've tried a few things obviously. Why does IE continue to hate me? What code can I write to make IE play nice like the rest of the browsers do?
The actual site URL is http://EpicClanWars.com if you wish to dig into source.
Add table-layout: fixed to the <table>'s style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
Related
http://staging.isaidicanshout.com/millersrest/
Hello, in the WIP example above, when sizing down below 1024, this site should switch to a single column view, by hiding two of the table-cells and resizing the width of the page. However, in Chrome it hides the cells, but leaves the remaining cell at its original width. Reloading the page at the new size gives the correct appearance. Any idea why this would not update correctly in Chrome?
Safari seems to work fine. Firefox is an entirely other story, but I will look into that separately.
Thanks!
In your CSS you have a position:relative; for #leftcol and #rightcol. When you have a media screen for 1024px, make sure you remove this attribute and then it will work as a one column display. See in the picture below how it is working, but most importantly that position:relative is unchecked
Here's a CodePen: https://codepen.io/neezer/pen/eWvLrm
Load that pen in Chrome (I'm running 57.0.2987.133).
Change the width of the <table> to 150px using a style attribute. Don't do this in the code (as it will cause a refresh--that's specific to CodePen and not my issue), but instead change it programmatically through the console or in the web inspector.
Note how Chrome resizes the table and does the proper overflow for the td/th elements:
Load that pen in Safari (I'm running 10.1 (12603.1.30.0.34)).
Change the width of the <table> to 150px using a style attribute. Don't do this in the code (as it will cause a refresh--that's specific to CodePen and not my issue), but instead change it programmatically through the console or in the web inspector.
Note how Safari does not resize the table to the given dimensions, since the td/th do not appear to shrink smaller than their content.
Why is this different? The only explanation I can think of is that Safari does not repaint the table on style changes, taking table-layout into account. I found this in the MDN docs:
Under the "fixed" layout method, the entire table can be rendered once
the first table row has been downloaded and analyzed. This can speed
up rendering time over the "automatic" layout method, but subsequent
cell content may not fit in the column widths provided. Any cell that
has content that overflows uses the overflow property to determine
whether to clip the overflow content, but only if the table has a
known width, otherwise it won't overflow the cells.
The difference to me seems that Chrome re-evaluates the table when it detects a dimension change on the <table>, but Safari does not, and thus does not overflow the cell.
I can make this problem go away if I ensure that <table> has a set width on initial render, but that's a no-go for my app, which allows the user to dynamically resize table dimensions. Needless to say, it works great in Chrome but not Safari.
Is there anyway to have Safari behave like Chrome here? Some way to force Safari to do the re-evaluation, if that is what's actually happening here?
Do Firefox/IE/Edge suffer from the same problem? Could they benefit from the same solution?
UPDATE: This little experiment in Safari's web inspector seems to confirm my theory: http://d.pr/v/bzhIH
You could wrap your <table> in <div>, set table width to this <div> and width: 100%; to the <table>.
If you want stretch your <table> for the columns content width, you need to replace width: 100%; from <table> and set width: auto; to <div>.
Here's example: https://codepen.io/Izumenko/pen/zaGGRM
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.