The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> Center on area
pandy
post Aug 11 2020, 05:20 AM
Post #21


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



wacko.gif

This isn't a number right. Is this with my test case, not with your JS? It works in every browser I have. Can you test it in something else than Chrome? I refuse to use Chrome, but have Iron which is supposed to be the same without the spying features, but it probably isn't up to the latest Chrome engine.

Also, what doctype do you use? Browers do what's called doctype switching that is triggered by the doctype. With the wrong one they go into quirks mode when they emulate older and buggier versions of themselves. Not that it seems to matter for this, I removed the doctype altogether and it still works. But I can't test in latest Chrome.

Just for the record...

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 06:10 AM
Post #22


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
This isn't a number right. Is this with my test case, not with your JS? It works in every browser I have.


I posted all the code, just single html file in this case

QUOTE
Can you test it in something else than Chrome?


Tested with microsoft Edge, samething, not centered

QUOTE
Also, what doctype do you use?


I haven't defined the doctype...


Very interesting that it works for you!


This post has been edited by jar17: Aug 11 2020, 06:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 06:23 AM
Post #23


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Edge, did I test in Edge? Yup. Works both with and without doctype. But put a doctype in just to see if it makes a difference.

Use either of these.
CODE
<!DOCTYPE html>


CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


I've asked Christian to come and help. There must be something I don't see. BTW what OS are you on? I'm on Windows.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 06:30 AM
Post #24


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ha ha! I never thought of running yours in a browser. It doesn't work. But I'll be damned if I can see what the difference is! laugh.gif

Wait a sec. I'll use brute methods to find it. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 06:34 AM
Post #25


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But jesus christ it's so obvious it's embarrassing! biggrin.gif laugh.gif tongue.gif blush.gif

You have left inline style in there. That will override "my" CSS. Just remove that and you're all set. I hope. laugh.gif

CODE
<div class = "customWin" style="width:200px;height:200px">
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


One gets blind. Guess I just stared at the CSS block and didn't actually read the HTML, more than for checking class and id names were correct.

Oh, and do use a doctype that triggers Standards Mode. It may not matter for this, but sooner or later you'll run into trouble if you don't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 06:58 AM
Post #26


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



@pandy Glad to hear you found the problem smile.gif it works now after removing the inline style!
But that raises another question, since in your CSS the dimensions are 50% does that mean the centering wont work with any other dimensions?

thx for your help smile.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 07:08 AM
Post #27


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It will work as long as the container has a width.

It's sort of a two step process. When you position the window thing 50% from the left its left edge will be in the exact middle of the container, no matter what width the container is. Try this alone with different widths for the container so you can see what it's doing. A width in percent is relative to the element's containing block which in this case is #container. So no matter the width of the container the window thing's left edge will be in the center.
http://www.w3.org/TR/CSS21/visudet.html#propdef-width

Then, to get the window centered you move it back with a negative left margin that's half of the window thing's own width. That will get the center of the window thing in the center of the container. So that last number needs to change if you change the width of the window thing.

Follow? tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 07:39 AM
Post #28


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



@pandy thx! everything works now with that margin trick. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 07:43 AM
Post #29


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Thank heavens! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 11 2020, 03:59 PM
Post #30


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 11 2020, 01:23 PM) *

I've asked Christian to come and help.

I haven't noticed anything. unsure.gif
Found it!

This post has been edited by Christian J: Aug 11 2020, 04:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 12 2020, 02:04 AM
Post #31


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



My blindness was temporary. Thanks for coming anyway. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:22 PM