Main content div not displaying on some browsers

It’s a mix. Some on Win 7, some on a MAC. Mac all appear to be Safari. Win users are mixed. I’ve only gotten feedback from about 6 people and 2 say it doesn’t work at all. I’ve had them clear their cache etc. All say the Classifieds work good on their phones. If you don’t see any errors I’ll just say it’s a “their box” issue.

Do you see any issues? As I said, since I removed the div, css checker reports an errant closing tag which I can’t find. Actually, it says which tag is extra, but Dreamweaver says they all match. Firefox console flags a bunch of css it doesn’t understand; most of which is Bootstrap or browser specific code. Others, are things it’s ignoring that I’ll look into when we get the page working well.

How is the page working for you?

I’ve actually written code to AJAX in the other ad choices into , but want to get the page working great before adding. Thank You!

What version of Dreamweaver are you using to build your site?

You have your priorities out of whack. If you do not know why something is being flagged as an error, NOW is the time to find out. Assuming that it’s not part of the problem and you can figure it out later is sillly.

The reason that the two </p> tags are being flagged as errors is because the opening <p> tag is followed by a form. One cannot nest a form inside of a <p>. Doing that automatically closes the opening <p>. You can put a <div> pair around the form but a form is not a paragraph, so the <p> tags flag an error.

Please do not use minimized jQuery or Bootstrap code while the site is under development. Use the normal, human readable form.

HTML5 does not require closing </p> tags on paragraphs, does it. So, are you taking advantage of the new requirement and not closing <p> tags? Look at this “thing”

<div class='txtcol'>
I have lots of past and present photos and more info on this MG racer; including old restoration shop notes, just ask.
<p>See web link on SCCA racing from early 1950s-1980s Edward Sandy MacArthur: 
<a href="http://www.ferrariexperts.com/sandy%...ur%20siata.htm">http://www.ferrariexperts.com/sandy%...ur%20siata.htm</a>
<p>Sandy built his first "Sparrow" race car around 1952
<p>This rendition built in the 1970s. Custom frame, MG wheels axles, etc
<p>Needs a little finishing. Later potent circa 1970 Ford Kent 1600 CC engine. (you can also add a Series T MG engine)
<p style="color:red">Go racing cheap! Reduced from 
<span class="strike">$17,000</span>
 to only $5,500 Don`t miss it!</p>
</div>

That was one long line. I added the line breaks so the tags would be on the left. Follow to the right and you will not find closing </p> tags until the end. How is a browser supposed to figure this stuff out? It’s a good idea to continue using balanced tags where they have been required. Can’t hurt and might prevent stray tags.

This is invalid code: <br clear="all" /> Break tags are empty tags. No empty tag requires a trailing slash in HTML period. clear is not an attribute.

<font color="red"> the font element is obsolete and has been for ages. Use CSS. DO NOT use inline styles in the HTML.

the closing </main> tag is flagged as an error because there are unclosed elements within.

Line 505 has an unclosed <div>.

Line 2331 has a stray </div>.

The errors are there. You can find the yourself if you will just look in Firefox or other validator tool.

You could also avoid most of these errors by using good coding practices from the start and validating frequently.

Do I see errors? Plenty. Do they matter enough to you to fix them instead of putting them off until the site is working better? That’s a joke … :lol: … right?

Inconsistently written HTML will not work the way you wish it would. That’s “magic” thinking. It takes more work to fix it after the fact that it would have taken to code it correctly the first time.

You have not adhered to the Bootstrap grid system. All bets are off regarding page behavior.

I recommend that you start all over and write good HTML and CSS from the start. And if you want to use Bootstrap, follow the instruction manual for using Bootstrap.

2 Likes

I copied the classifieds.php?want source HTML into my text editor and did some “find counts”

<p” 19
</p” 9
<div” 262
</div” 263

Maybe all the unpaired opening p tags were meant to be br tags?

https://www.w3.org/TR/html-markup/p.html

Tag omission
A p element must have a start tag.
A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.

The “immediately followed by” is not true for the several I looked at.

As for the classifieds not showing, I have to ask. Adblocker?

Off-topic, but seeing mark-up like this makes me shake my head.

<p>$nbsp;</p>

1 Like

The gradient is still not quite right and if you don;t want to move it to an inner div as mentioned before then set the background-color to the ending color of the gradient to stop the sudden stop.

e.g.

.adDivBG{
background-repeat:no-repeat;
background-color:#aaa;
}

The above are additions to your existing rules.

Ask for screenshots of their page as it may shed some light on what is happening or at least show where things are going wrong from.

As others have mentioned above you need to fix those mismatched tags and always close your p tags even though the specs say you can leave them un-closed in certain places but browsers will be confused with this and strange things will happen. Never leave anything to chance or for browser error handling to come into play.

You can remove the stray closing tag found berfore the comment .

</div> <!-- remove this one -->
<!--txt-->
</div>
<!--content-->
</body>
</html>
1 Like

<off-topic>

Thanks for noticing and fixing the missing backticks, TB

</off-topic>

1 Like

Good points. I used Dreamweaver here because it has a tag matcher.

Ronpat’s point is valid. I’m ignoring those errors (unclosed p and <p>&nbspgt;/p>) for now because I know what they are. My php code inserts these if a user submits an ad with a bunch of repeating cr / lf. I didn’t mean I’m ignoring them because they are not important. I will rewrite the code and handle these issues differently. Thank you for the education; I forgot that a form can’t be inside a <p> block.

Yes, clear is invalid. But in the prior markup using floats it worked to clear floats and remains in a few database entries that will go away when I clear that ad or its author requests removal. Same with the font tag. It’s a stamp my php code puts in if an ad is sold. I didn’t think that was preventing the page from displaying and didn’t want to introduce another div with class ‘sold’ while I have unclosed div errors.

That “thing” is the body of a submitted ad. As I said, my php form processor needs updating to close the <p>. At the moment, the php I wrote just inserts a <p> tag if it receives a bunch of consecutive carriage returns. I could try a regular expression perhaps to look for the next line break and insert a </p> to close the tag. Again, valid critiques, but I didn’t think those were causing the page to not display and I know the cause so was “ignoring” these in search of the cause for not displaying on some user’s computers.

I’m using css3 flexbox in most places not the bootstrap grid.

w3.org/nu validator isn’t showing <main isn’t closed, but since I took the div out that you said was doing nothing I’m now getting the unclosed div. I think you were right about the div I removed not being needed, but I can’t find the unmatched opening div that line 1042’s close div goes with. That’s why I put the code in Dreamweaver to match tags.

Thanks for your help. I should have asked the few still having trouble to disable their adblocker. Adblockers were a problem when I stored the pictures in a folder called ads so I changed the folder to class resolving that problem. Maybe ad.css is being blocked. But most of the styles are in classifieds.php at the moment so I can change them in real time while testing / debugging.

Everyone’s guidance continues to be helpful and improve my knowledge and the page; thanks.

What version of Dreamweaver are you using?

Look at your previous markup and related CSS. If it looked like your current markup, it was doing nothing. If it was actually clearing floats, it was written differently.

2015.0, but I didn’t use any Dreamweaver button clicking or inserting to build the site or this page. I don’t know if Dreamweaver supports flex. I usually work in code view. I think I have the current ver. Updating is a pain as Adobe wants to put Creative Cloud down a bunch of folders in c:\program%20Files even though I’ve told it to install on drive f:. But that’s a different problem …

Everything is a bit frozen until I resolve this for Club members

I rewrote classifieds in the dev folder to get away from floats. I don’t like them. But, I’m pulling data from the same db so the clears remain and worked. They will go away in a day or 2 when ads clear.

It’s significant that you are using a modern version and I’ve heard that even earlier versions of Dreamweaver have a very good code editor. That sounds like a positive.

Again, mixing Bootstrap classes/element rules in non-bootstrap code is causing the 5 menu-looking images to stretch out of proportion and overflow the rest of the page. If you change the container className from .container to something else, they will fit in the page and scale. .container is a predefined Bootstrap class.
Firebug would show you that in a second.

I use bootstrap for the image responsive. That’s obviously the problem. The ad type buttons at the top don’t look out of scale on my Win desktop at any viewport size. They do on yours?

I’ll look at changing the name

See my screenshot in post #4, confirmed by @TechnoBear shortly afterwards.

1 Like

Is that the only reason you have Bootstrap, to make images responsive? :worried:

1 Like

Yes, Bootstrap is a slug. I saw your screenshot, but can’t replicate it and hoped it had been resolved.

Yes, I’m using it for responsive images. If I take Bootstrap out, other styles get messed up badly as I’ve been compensating for the bootstarp css file. I think I"m also using Bootstrap for the menu system. That was the main reason I started using it. Since I was using it, I tried to use other capabilities it has in hopes of only loading one slug

My concern was that you are loading all that stuff, just to get this simple little bit of css:-

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

:smile:

1 Like

brad26,

I can’t help but restate…

You will save yourself a lot of grief by making a clean start.

1 Like

But you didn’t ask for additional confirmation… you just “hoped”. Denial is no one’s friend.

I would not say the page is bloated by today’s standards. But since you only use a tiny fraction of the Bootstrap “slug”, you may well get by without it and end up with a super-slim page.
Up to you, I can understand you using their menu if you don’t know how to do one yourself.
But that mammoth css just to do: img {max-width: 100%} is crazy.

3 Likes

Bootstrap is a full blown grid layout system with extras. It’s not a drop-in utility that sits in the background and only acts on images that need to be resized, for example. Bootscrap expects to be the overall framework for the page.

I agree with Sam that the page is not bloated by today’s standards. Instead I see it as corrupted by mischosen and casually applied code. Bootstrap isn’t a plug-in. From what I’ve seen, you don’t need it at all. But if you think you do, then treat it as the framework that it is intended to be. Read the manual and follow the rules of Bootstrap. You can’t just deny (or turn off) the intracies of the product by not learning about them.

Again, thanks for the critiques. I chose to use img-responsive because I’m already using Bootstrap for the menus. Further, I don’t think a few unclosed tags equates to poorly chosen code. I use Bootstrap for the menus, it works well so I used it’s responsive image features. Yes, I could roll my own menu without BootStrap or even jQuery I guess, but I’ve worked hard on this slide down menu and think it works well on all devices and window sizes I’ve tested. Flexbox’s grids work better, in my opinion, than Bootstap’s so I’m using them.

I try to pick/write code that does the job best. If a framework will do a job great, I’ll use it; when it doesn’t, I create something that will or work with others to create something. I try to write very clean php and javascript code and was trying for clean css as well, but obviously I’ve failed in your opinions.

Thank you for the help in improving my knowledge of css; apparently it’s not ready for prime time. And yes, I’ve read the BootStrap manual and even tried to contribute to their JS

I still can’t replicate the way the ad choice buttons look in your earlier post. Are they still a mess? What OS/browser and window size are you experiencing this on? Since I hadn’t heard about this again, I thought it had been resolved. I should have confirmed or asked what you think the cause is.