Please look back at post #38. I must have been editing for a long time… Sorry.
The URL I have been testing is:
http://pintotours.net/Asia/Japan/IbisShinjuku.html
what does “wow” mean?
The Ibis Shinjuku and the Ibis Kyoto use the same css
Sorry, I’m referring to the colorful image at the top of the middle column in the various pages.
If the HTML is the same, no problem; but if the HTML is different, ???
1 Like
The html code is the same, but the content is different
Brain is getting tired. I will make all the changes from #38 in the morning
many thanks
What is the URL for the Ibis Kyoto page?
Never mind, I found it.
The HTML is NOT the same!
It looks like you need to add
<div class="map">
...
</div>
around the anchor with the image of the map.
Like this:
<div class="map">
<a target="_blank" href="MapKyoto.html">
<div class="img-container">
<img width="300" height="165" alt="" src="images/MapKyoto.jpg">
</div>
</a>
</div>
1 Like
Don’t Panic! (This is an FYI only. )
I wrote the above to demonstrate the standard CSS Box Model which says that the total width of a box is the sum of its declared width + padding + borders + margins. In other words, if a box has been assigned a width of 300px and also has been assigned a 2px border along with 2px of padding and has no margins, the total width of that box will be 308px. Surprise!
If you want the image itself to be 300px, just change 292px to 300px… no prob… and be aware that the width of the box including the blue border is 308px. (And “No”, the right edge will not overflow the edge of the window if the max width of the img-container is wider.)
That’s how it works .
(And I still think a 400px map image would look good. Go ahead, try it, change the number and see what it would look like, it’s a free trial .)
1 Like
Hi ronpat
This style is NOT in the media queries. Which one do you mean?
I’ve applied all your code and deleted the im-container code in MQ1020.
This is what I get for the map
and at very low width there is a blue border that behaves but the map itself overflows the border and looks pretty much as before
I will put these test pages live for you to have a look http://pintotours.net/TEST/IbisKyotoStation.html
At this time,
newhtl.css (line 486) shows:
#content #box1 {
background-color: #fffefc;
border-bottom:10px solid #594c26;
padding: 0;
}
and
newhtl.css (line 544) shows
#content #box4 {
background-color: #fffefc;
height: auto;
padding-bottom: 30px;
padding-top: 10px;
}
That is as it should be.
For the record: at this time, this media query begins on line 1035.
@media screen and (max-width:1020px) {
and the following code still exists within that media query. It should have been deleted. Please delete it. If something breaks, please make a clear note about it, but DO NOT put the code back.
newhtl.css (line 1104)
#content #box1 {
height: 100%;
width: 100%;
margin-bottom: 10px;
}
newhtl.css (line 1116)
#content #box4 .img-container img {
margin:0 auto 7px;
margin-bottom:7px;
border:1px double #6495ED;
border-width:2px;
padding:2px;
max-width:300px;
}
The preceeding code within the media query should have been deleted. Please delete it now. If something breaks, make a clear note of what happens, but do not put the code back.
Finally,
please delete the following width. It is not causing a problem, it simply is not needed. More unnecessary code.
newhtl.css (line 1111)
#content #box4 {
margin-top: -10px;
width: 100%; /* DELETE ME. I am already a block object */
}
and delete (lines 517-527)
.img-container {
margin:0 auto 0; /* DELETE Me */
border-radius:0; /* DELETE Me */
border:none; /* DELETE Me */
padding-top:0; /* DELETE Me */
width:100%; /* DELETE Me */
}
You can leave .img-container {} empty, if you wish; but it should contain NO styles. More unnecessary code.
1 Like
OK, I made all the changes as requested
The map still has 2 borders and they misbehave
the main text gets cut also
The results you are reporting are seen in IE8, not modern browsers. It would be nice if you mentioned that because I did not verify the code in IE8 although I should have. My bad.
Your reply was very prompt. Mine now is waaay delayed. I don’t know why, but I did not see/receive your reply. I was watching… or thought I was… so I apologize profusely for the delay.
For IE8 compatibility, please make the following changes:
CHANGE .map .img-container as follows:
newhtl.css (line 748)
.map .img-container {
background-color: #fff; /* DELETE Me! */
border: 2px solid blue; /* DELETE Me! */
max-width: 292px; /* CHANGE to 300px */
margin: 0 auto;
padding: 2px; /* DELETE Me! */
}
ADD the following NEW style:
.map img {
background-color:#fff; /* color of the 2px padded space */
border:2px solid blue;
box-sizing:border-box; /* for usability info, read: http://caniuse.com/#feat=css3-boxsizing */
padding:2px;
}
I did not see any text being cut off. You’ll have be more specific. Maybe attach a screen shot and describe what you can.
1 Like
Hi ronpat
I did not try it in IE8. I am using IE11, Chrome, and Firefox. The image that I sent you was from IE11 but I get the same in Firefox at least.
I’d like to sort out the main browsers before going onto IE8 iwith conditionals (easier to get rid of soon when I give up on IE8)
I am not pushing conditionals at all. I rarely use `em. Haven’t in quite a while, in fact.
The change that I sent you should apply to all browsers including IE8+. I do recommend it. If you disagree, we can add one more HTML container and do it the old fashioned way; but it really shouldn’t be necessary.
If you are not going to implement it, TELL ME. Otherwise, I assume you will use it. Am I being stupid?
I just now see the screen shot peeping over this message box. Obviously, when I look at your site, I am seeing nothing like that.
The link I am using is:
http://pintotours.net/TEST/IbisKyotoStation.html
The page looks OK to me in Chrome and FF.
1 Like
Hi
Please, leave the IE8 issue. I prefer to treat that only when the page is working properly for the modern browsers.
The screen shot above shows the page you mention when you narrow the screen once you get to 300px. I know few devices get that small but other pages adjust all the way to infinity.
Anyway, again, this is not inportatnt.
What I need to sort out is the map.
No. That’s not how I work. Fixing that behavior uses good code. I had already recommended it to you and you did not respond so I let it go. I shouldn’t have.
I dont’ see it. I can’t fix things that I can’t see. The text and the image of the map work quite well. The map would work properly with IE browsers if you would implement that last code change.
From where I sit, the map is very fixed. It works for me in FF, Chrome and IE8 (with that last code change).
1 Like
I do apologize
I’ve just tested the page in all 4 main browsers and YES the map works fine except for the pink background that extends from side to side, Where does that come from?
Read the blinkin` comments:
.map a {
display:block;
padding:0 4%; /* minimum white space beside image. these right and left paddings are a guess. change to suit. */
outline:1px dotted red; /* TEST Outline around anchor. To Be Deleted. */
background-color:rgba(255,0,0,.075); /* TEST BGColor within anchor. To Be Deleted. */
}
Soooorry!
Yes, it’s perfect now, thanks to you.
Would have taken me a couple of months to get near…
Thank you very much for your help and patience.
And this is what it looks like right this minute in IE8 and will continue to do so until you implement that last simple code change… after which it will look just like everyone else.
1 Like
Hi
I need to get my XP computer out of mothballs again to test and amend accordingly
Thanks
In the meanwhile, you just need to implement the code as given.
Are we finished?