http://dfwcgi.com/approach/white-papers
Live site, but neglected to trouble-shoot with IE before hand. All the article images (via images and links tab) are NOT responsive with IE11. Images in the body of any article do comply and are responsive. I've seen this "auto \9" on different forums, but cannot really find a solution. I've changed my custom css a few times but with no results. IT's a Rocket Theme. I've even created an IE11 custom css page...with no luck.
Would really appreciate input- this is driving me crazy.
Thanks in advance!
There are a couple of small changes you can make to improve the layout in Internet Explorer 11. For starters, you'll want to remove the width: 100% property on the DFW logo at the top of the page. Given its wide host container, this results in the image being stretched out too large:
While removing the width: 100% property resolves the DFW logo issue, it results in broken body images. At this point we see that the div.pull-left.item-image elements are actually wider than their host <article> elements. As such, we can apply the max-width: 100% property to them:
.pull-left { max-width: 100% }
This results in a restored layout in Internet Explorer 11.
Ok,
Not sure if this is THE answer, but in my master IE css page I added this:
img {
width: 100%;
}
http://dfwcgi.com/templates/rt_chimera/css/master-ie11.css
This affects a few other images in the site, but was the best I could come up with for now...open for suggestions...
Thanks again!
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
Hello i seem to have a problem with what could be technically called 'a huge gap down the bottom of my website on Google Chrome'. I think it is to do with this code-
#container {
width: 968px;
min-height: 2100px;
}
I have changed the min height down to 600px and things seem to be ok on Firefox and IE9. On Chrome though there is a massive gap. You can view my site here-
http://onlinebanter.com/
It's depressing as i use Chrome for the admin side of things on my site and i have to look at all day every day and it's starting to get me a little down. I have asked about the internet but have had no response even from the place where i bought the theme (they seem to have the same problem on their demo site)
Id there anyway to fox this?
Thanks
Reg.
Without looking at the actual problem...
You're using an HTML 4 Transitional doctype with namespaces in your <html>. Funny and faulty.
-- edit 1
The problem is the weird located footer img. Make that a block with CSS and you're golden: display: block;
-- edit 2
The min-height has nothing to do with it. Why do you even have a min-height??