Hi,
I am having a problem with IE. The url to my site is www.trecall.com. I want to put a margin on the left side of the animated menu, to make the menu centered on the page. This works fine in FF, but in IE, the margin does not show up.
Any idea why?
THANK YOU!!
Jump to Post.container { width:100%;text-align:center; } .cc_menu{ font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden; }<div class='container'><div class='cc_menu'> menu </div></div>
Jump to Post1. Don't use absolute positioning.
2. All other browsers place the margin outside of the object (as seen by absolute and width). IE places it inside the object.
Jump to PostYou mentioned that
margin: 0px auto;doesn't work? I've tested it in Firefox, Chrome, Safari, Opera, and IE8 - it works fine.Regards
Arkinder
Jump to Posthazy memory...
span is an inline item and inherits the line height and vertical margins of its parent block element, and appears in the flow of text.
to use other css effects not applicable to inline items, example absolute positioning, adddisplay:block;to the css for this span
Jump to PostI inserted
margin: 0px auto;into your page and it worked fine in the browsers I listed previously. Could you post your markup and style sheet where you tried to center it withmargin: 0/0px auto;Regards
Arkinder
Can you post the code you are using to make the margin?
.cc_menu{width:1290px; margin-left:150px;/*height:591px;*/position: absolute; font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden; /*border:3px solid green;*/}
thanks!
I want to center the menu, so actually margin-left would not be a good idea, since that would only center it for my screen, not all screens. I tried margin:0 auto, but that did not work. What can I do?
Thanks again.
If you look at my site, I use <div> containers. These allow me to put any content ANYWHERE. Here's an excerpt from my css, that makes the navbar where it is:
.navbar {
position:absolute;
top:195px;
left:255px;
width:782px;
height:24px;
z-index:2;
background-color:#5E4234;
}The position:absolute; tells the browser you are going to give it the absolute coordinates of the top-left corner, and the width and height. you can even have div's overlapping, and that's what the z-index does. the z-index just says, this div is ontop of this div, this one, and this one. The higher the z-index, the "closer" it is to you, as in it is on top of others. So for you, you just need the position, left, and top, and you should be good.
This is a good idea if I'd want to center it on my screen only. But this doesn't center it for all screen sizes, does it?
Thanks, I appreciate your help!
It's interesting; I added <div align="center"> in my html, under the body tag. This centered the site for all screen sizes, but the menu does not center! It stays in the same place!
.container { width:100%;text-align:center; }
.cc_menu{ font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden; }<div class='container'><div class='cc_menu'> menu </div></div>This did not work.
1) When I add a container div to my html, for some reason, I get a strange black bar on the left side of the site.
2) This does not center the menu for all screen sizes.
PLEASE HELP!! Thanks for your time!
1. Don't use absolute positioning.
2. All other browsers place the margin outside of the object (as seen by absolute and width). IE places it inside the object.
There is no absolute positioning on the element that I am trying to center. I tried everything possible, and it just stays in the same place. (In IE, no margin shows up at all, the only way to center it even just for my screen is with absolute positioning!)
You mentioned that margin: 0px auto; doesn't work? I've tested it in Firefox, Chrome, Safari, Opera, and IE8 - it works fine.
Regards
Arkinder
You mentioned that
margin: 0px auto;doesn't work? I've tested it in Firefox, Chrome, Safari, Opera, and IE8 - it works fine.Regards
Arkinder
I have used margin: 0px auto; in the past, and it always worked for me. for some reason, now it is not, and I am trying to figure out why, but I can't figure it out! There must be something causing it in my code, but I can't seem to figure out what that is!!
hazy memory...
span is an inline item and inherits the line height and vertical margins of its parent block element, and appears in the flow of text.
to use other css effects not applicable to inline items, example absolute positioning, add display:block; to the css for this span
hazy memory...
span is an inline item and inherits the line height and vertical margins of its parent block element, and appears in the flow of text.
to use other css effects not applicable to inline items, example absolute positioning, adddisplay:block;to the css for this span
The element that I am trying to use
margin:0 auto;for is not a span.
I inserted margin: 0px auto; into your page and it worked fine in the browsers I listed previously. Could you post your markup and style sheet where you tried to center it with margin: 0/0px auto; Regards
Arkinder
Put DTD at the top of your HTML. IE ignore some CSS property while the DTD was missing.
I inserted
margin: 0px auto;into your page and it worked fine in the browsers I listed previously. Could you post your markup and style sheet where you tried to center it withmargin: 0/0px auto;Regards
Arkinder
HTML: The element that I am trying to center with
margin:0 auto;is called ".cc_menu".
<!DOCTYPE html>
<html lang="en">
<head>
<title>Total Recall Solutions</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Bebas_400.font.js"></script>
<script type="text/javascript" src="js/collapsing-site-navigation.js"></script>
<!--[if IE 7]>
<link rel="stylesheet"href="css/ie7.css"type="text/css"media="all" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet"href="css/ie8.css"type="text/css"media="all" />
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<!--<div align="center">-->
<div class="bg1">
<div class="main">
<!--header -->
<header>
<h1><a href="index.html" id="logo"></a><span id="slogan">We keep them coming back</span></h1>
<nav>
<ul id="top_nav">
<li><a href="index.html">Home</a></li>
<li><a href="delay_notifications.html">Delay Notifications</a></li>
<li><a href="smart_pay.html">Smart Pay</a></li>
<li><a href="patient_feedback.html">Patient Feedback</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</header>
</div>
</div>
<!--header end-->
<!--content -->
<!--<div class="bg_bot2">-->
<div class="bg2">
<div class="bg_bot">
<div class="bg_top">
<div class="main">
<section id="content">
<!--<div class="container">-->
<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:6;margin-right:14px;">
<div class="cc_content_1">
<img src="images/img1.jpg" alt="" />
<span class="cc_title">Patient <br /> Communication Center</span>
<span class="cc_submenu">
<span>Patient Communication Center</span> </span> </div>
</div>
<div class="cc_item" style="z-index:5;">
<div class="cc_content_6">
<img src="images/img2.jpg" alt="" />
<span class="cc_title">Grow <br />Your Practice</span>
<span class="cc_submenu">
<span>Grow Your Practice</span> </span> </div>
</div>
<div class="cc_item" style="z-index:4;">
<div class="cc_content_2"><img src="images/img3.jpg" alt="" />
<span style="padding:14px 0px 14px 0px" class="cc_title">Online Scheduler</span>
<span class="cc_submenu">
<span>Online Scheduler</span> </span></div>
</div>
<div class="cc_item" style="z-index:3;">
<div class="cc_content_3"><img src="images/img4.jpg" alt="" />
<span style="padding:14px 0px 14px 0px" class="cc_title">Automatic Reminders</span>
<span class="cc_submenu">
<span>Appointment Reminders</span> </span></div>
</div>
<div class="cc_item" style="z-index:2;">
<div class="cc_content_4"><img src="images/img5.jpg" alt="" />
<span style="padding:14px 0px 14px 0px" class="cc_title">Mobile Access</span>
<span class="cc_submenu">
<span>Mobile Access</span> </span></div>
</div>
<div class="cc_item no_pad" style="z-index:1;">
<div class="cc_content_5"><img src="images/img6.jpg" alt="" />
<span class="cc_title">S.E.O.<br/> <span style="font-size:12px">we'll get you to the top</span></span>
<span class="cc_submenu">
<span>S.E.O. <br /><span style="font-size:12px">We'll get you to the top</span></span> </span></div>
</div>
<div id="cc_content" class="cc_content">
<section class="cc_content_1">
<div class="line1">
<article class="pcc">
<p>Have you ever wondered how you would contact your patients should an emergency arise? As each crucial minute ticks by, how would you go about tracking down your patients to cancel their appointments?
With TOTAL RECALL SOLUTIONS you’ll never have to ponder such a question. In just a few clicks you’ll be able to quickly and efficiently notify your patients of any last minute changes or cancellations.</p>
<p>The Patient Communication Center allows our doctors to take their patient care to the next level. Now, at the click of a button, Total Recall Solutions allows providers to check in and see how patients are feeling post- op and provide updates with important after-care information detailing the proper protocol and hygiene necessary to help the patient keep their treatment on track. You can also utilize our system to send customized holiday and birthday e-cards to let your patients know that you are thinking about them.</p>
<p>Now you will be able to keep track of who confirmed and who still needs to confirm their appointment. Total Recall Solutions’ Direct Messaging allows office staff to send customized messages to an individual patient or a specific group. Our system will automatically generate a “To Do List” to help organize the following real time events: <br />
• Notifications for all appointments booked online<br />
• Notifications for confirmed appointments<br />
• Patients who needs an additional reminder<br />
• Patients who cancelled and needs to reschedule<br />
• Patients who need their inquiry responded to</p>
</article>
<article class="col2 pad_left2">
<h3>Recall Wizard</h3>
<img class="hat" src="images/hat.jpg" />
<p class="hatPara">
Sit back, relax and let our Recall Wizard do just that, recall your patients with new found ease. Developed to be a flawless transition from your current practice management software, Total Recall Solutions’ Recall Wizard will redefine the way your practice communicates with your patients. Whether it’s a hard to reach patient, or one who has no continuing care appointment scheduled, our wizard effortlessly allows you to contact any patient via email, SMS, or by phone. Our messages, which are completely customizable, can be configured to be sent out at the time of you desire to help you achieve optimal recall results.</p>
</article>
</div>
<a class="back" href="index.html">Home</a> </section>
<section class="cc_content_6">
<div class="line1">
<article class="signintro">
<img class="sign" src="images/sign.jpg" />
<p class="signPara">You want to increase your client base and we’re here to help.
At Total Recall Solutions, we’ve developed some innovative features that are sure to put smiles on your clients’ faces. Now you can instantaneously email or text message your patients, potential patients and referring physicians, for just about anything. With just the click of a button you’ll be able to alert all those in your system of promotional treatments and new procedures, or to simply send a holiday greetings.</p>
<p class="signParaThree">Whether you decide to use our professionally designed e-mail templates, or customize your own, your patients will receive up-to-date information that will keep them in “the know” about you and your practice.</p>
</article>
<article class="col2 pad_left2">
<h3 class="social">Social Media</h3>
<p class="pad_bot1">
<img class="network" src="images/network.jpg" />
Social Media has revolutionized the way the world communicates, bringing new meaning to mass-marketing. And Total Recall Solutions wants YOU to capitalize on its potential.
At Total Recall Solutions we’ve brought the alluring world of social media to your fingertips with attractive and easy to use features that will get your practice noticed and encourage readers to share it with their social network. With Total Recall Solutions your social media buttons are automatically included in all your emails and are similarly embedded in all your SMS links. We also provide specialized tools and platforms to help you increase communications that foster brand awareness and better customer service.
So put the relatively inexpensive world of social media to work for you, and watch your practice flourish.</p>
</article>
<a class="backGrow" href="index.html">Home</a> </div>
</section>
<section class="cc_content_2">
<div class="line2">
<article class="ols">
<p>The internet has opened up a wealth of opportunities and services. How many times a day do people “point and click” from the comfort of their home, office or anywhere for that matter, as he quickly and efficiently accomplishes many daily tasks? In just a few clicks bills get paid, lunch gets ordered, and a vacation gets planned…. All done at the time and place most convenient to the consumer.</p>
<p>Why should the rapidly growing and sophisticated dental industry be left behind?</p>
<p>Why not offer the same 24/7 convenience of the internet to your patients?</p>
<p>With TOTAL RECALL SOLUTIONS’ ONLINE SCHEDULING SYSTEM you can set your practice apart by allowing your patients to easily book their appointments 24 hours a day 7 days a week using the online device of their choice. </p>
<p>And your staff will love it too! Monday mornings will no longer be stressful days as office staff scurry about trying to catch-up on weekend calls and cancellations. With TOTAL RECALL SOLUTIONS’ ONLINE SCHEDULING SYSTEM patients will have rescheduled their own appointments and wait-listed patients will be notified- all before your secretary even arrives. Leaving your staff readily available to greet your patients with the attention and smile they deserve.</p>
<a href="features.html" class="button read_more"><span>Features</span></a> </article>
<article class="col1 pad_left2">
<div class="ben">
<a href="Benefits.html" class="button read_more"><span>Benefits</span></a> </div>
</article>
<a class="backGrow" href="index.html">Home</a> </div>
</section>
<section class="cc_content_3">
<div class="line1">
<article class="col1 pad_left1">
<p class="ar">Today, as usual, the office staff has been extremely busy. Sue’s has been calling the office all morning to be squeezed in and Mary just called to cancel at the last minute, and James, well James didn’t call at all….. apparently he totally forgot about his appointment! We don’t have to tell you the stories… we’re sure that YOU could write the book about who didn’t show up for their appointment and why they didn’t. That’s why managing your office appointment reminders is crucial, both for your practices’ productivity and profitability. You need to keep your chairs filled in order to maximize your bottom line. Unfortunately, this key component is also an extremely time consuming and often tedious job for your office staff. Until now…</p>
</article>
<article class="col2 pad_left2">
<a href="read.html" class="button read_more"><span>Read More</span></a> </article>
<a class="backGrow" href="index.html">Home</a> </div>
</section>
<section class="cc_content_4">
<div class="line2">
<article class="col2 pad_left1">
<p class="mobile">Using Total Recall Solutions, our doctors can remotely access all the information they need to determine how their practice is functioning. Whether you’re on vacation, out on an errand or at a convention, you’ll always have your finger on the pulse of your practice.</p>
<p class="mobile">Your office staff will also benefit from our mobile accessibility. Turn the tedious job of patient recall into a simple task performed by a few clicks on the train ride home.</p>
<p class="mobile">Using our iPhone, iPad or Android app, or any other mobile device, you and your staff will have instant access to all the features we offer.</p>
</article>
<a class="backGrow" href="index.html">Home</a> </div>
</section>
<section class="cc_content_5">
<div class="line1">
<article class="col1 pad_left1">
<h2 class="coming">coming soon</h2>
</article>
<a class="backGrow" href="index.html">Home</a> </div>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!--content end-->
<!--footer -->
<div class="bg3">
<div class="main">
<footer>
<!--<span id="cc_back" class="cc_back">back to menu</span>-->
<!--<span id="cc_back" class="cc_back_page">back to page</span>-->
<span class="right"><!-- {%FOOTER_LINK} --></span>
Total Recall Solutions © 2011 | <a id="privacy">Design by Suave Design</a>
</footer>
<!--footer end-->
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>CSS:
.cc_menu{width:/*1290px;*//*99.625em;*//*100%;*/97.5em; margin-left:150px;/*9.375em;*//*margin:0 auto;*//*height:591px;*/position: relative;/*top:/*13.75em;*//*220px;left:/*0.938em;*//*15px;*/ font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden;/*border:3px solid green;*/}
Put DTD at the top of your HTML. IE ignore some CSS property while the DTD was missing.
My html doc begins with:
<!DOCTYPE html>. Is that not a dtd?
Thanks.
You've changed your CSS a bit since I messed with it last. I don't have time to go through each element and how the browser is rendering them (and what order). So I don't really know exactly what's causing the problem - unless almostbob has any ideas?. Just center the div that's containing it.
#content {
height: 591px;
width: 97.5em;
margin: 0 auto;
}Oh, and you have cc_menu for the id and class. The ID attribute is used for unique/specific elements, so having both defeats the purpose.
Regards
Arkinder
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.