Stubborn navbar won't narrow

I’m confused. I go to the page but you only implement half of my fixes from my previous post. Can’t expect it to work if you only do half of my fixes.

Hi

I was so proud of having sorted out the main issue of the page, that I was in tears a monet ago when I thought I’d lost it…

Anyway, after a few hankies and the realization that the page is now back where it was, I agree with you: one thing at a time. The code you sent me solves the margins at the top of #box1 but makes the sidebar stay at full width throughout at the expense of #box4.

What do you want the sidebar to do at the smaller screens? You only have so much room.

Your box4 shouldn’t have a height on it anyway (bad!) so that’s why content is clipped.

Right

I’ve backed up my latest version and added the code you sent me- As you can see it makes the sidebar stay at full width as you narrow the screen

We are crossing posts. Please have a look at the page now with your code, and I will put the earlier version back, which is what I am trying to achieve, In fact, I have achieved it, albeit a few minor (I hope…) problems

Did you see in the earlier version that the #right disppears as the screen narrows, at around 800px?

Yes. Wasn’t sure whether that was on purpose.

All your panels in the right sidebar disappear via display none. Why not just give the #right display:none instead? The #right width is still being used even though everything inside of it is display:none.

Sorry Ryan
I’m trying to do things in a hurry, as I have to go out and making a big mess…

Now you have http://pintotours.net/Work/TEST/bali2.php with your last bit of code

and

http://pintotours.net/Work/TEST/bali.php which is how I want the sidebars to work

On bali.php though as I keep narrowing the screen, the middle content section gets cut off. Height is set on Content :frowning: .

Anyway the two pages seem to behave the same way?

I was afraid you’d say that. Try in Firefox with Responsive Design View. That’s what i want. I know, I tried in IE9 and it did not work. In the end what I need is what you can see in bali.php in Firefox (if it’s possible)

Sorry about all this mess.

Screenshot of what you are seeing in IE9 please. I see no difference.

Perhaps one screenshot of IE9, and one of the FF view.

Sorru Ryan, I’m in ahurry to go out. I will be abck in about an hour

In IE) I exoect I see the same as you. Did you try FF in Responsive Design View?

No I didn’t. I’m trying to do some work and I only viewed it in Chrome and narrowed the viewport.

I’ve been holding off on upgrading FF for a smidge now - haven’t had time.

I’m back

I’ve just tested my page on all main browsers and with thebexecption of FF they all cut the middle Content like you said.

In FF, whether in Responsive Design View or normal mode the Content adjusts to the size of the screen as it should do
I am writing from IE9, which does not allow me uploads. I will change the browsera dn uopload the screen shots of FF

So, now, it looks like my work of art is useless! How can I get it to work on all browsers?

I wonder…

It appears that what is happening now is that the vanishing #right sidebar is actually diving under Content and Content with a max-width of 600px has a freeway to the right where the sidebar has gone.

Would it solve the problem if a fixed invisible thin sidebar was placed there at media queries 800px? That way the Content would be squashed as the screen narrowed.

I tried to put visibility:none for the sidebar instead of dispaly:none but it didn’t work.

Am I talking a load of rubbish? well, I tried

Did you try it :wink: ?

From what I saw, the disappearing content inside of #right was because all your right sidebar panels get display:none. You don’t actually give #right a display:none; though so you still see the background.

Not sure what you want done with that but I noticed it so I thought I’d mention it.

Hy Ryan

-#right has a disply:none at 800px.

I tried also visibility:none to put a barrier to Content but it didn’t work.

Any ideas?

I’m not seeing that in your code. We are still talking about http://pintotours.net/Work/TEST/bali2.php right?

Which file are you looking at?

bali2.php was the one to show your code.

The file I am working and that works in FF is bali.php

Your panels are s till disappearing from 800-1000px because of your media queries. So for 200px your right sidebar is nothing but a background color.

@media screen and (max-width:1000px) {
 
 #content {
 clear:both;
margin-left:190px;
position:absolute;
top:200px;
width:auto;
max-width:600px;

}
#content #box1, #content #box4{
 clear:both;

padding-right:0;
 width:100%;
 max-width:600px;

 }

 
 #right {
 width:100%;
 max-width:190px;
 }
 .panel1{
 display:none;
 }
 .panel2 {
 display:none;
 }
 .panel2right{
 display:none;
 }
 .panel3{
 display:none;
 }
 #airleft{
 display:block;
 }
 #insuleft{
 display:block;
 }
 }

I’m referencing the panels.

That’s right. That how I want the sidebar to look for the moment. Later I will invent something to make it look better.

If the code for Content works in FF but not in any other brwoser, there must be a tiny piece of code that makes the difference. If it is possible to find out what it is, it migh also be possible to find a way round for the other browsers to comply…

I’m sorry I’m so dense but I’m seeing hte exact same behavior in Chrome and FF. Those screenshots of behavior are also appearing in Chrome.

I wish I could be of more help. I just don’t know what you want.