Note: this question is no longer relevant. The site has been moved to a new host and the the code on the site no longer applies.
Thanks.
I am trying to help out a client. The site is almost ready to go, but there are a series of images that simply disappear in IE7.
The click on the Leadership tab and the whole block of content vanishes.
Here is the html for that section:
<div id="leadership-content" class="content">
<p class="intro">Leadership for every company is important in the daily management and growth as a business matures. At Moving Simplified we feel that offering our employees career-oriented paths gives them a more sincere desire to provide outstanding customer service. All employees have the option to "climb the ladder" to eventually own a franchise of their own.</p>
<div class="profile">
<h3>Eric M. Snider<img class="flt-right" src="_images/Eric_Snider_Logo_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" /></h3>
<h4>Founder / Chief Executive Officer</h4>
<p>Eric founded Moving Simplified in 2007 as a professional services company with a new concept to assist people during one of the most stressful times of their lives: moving. His vision was to build a new type of moving services company - a company that would include every service that a customer would need during their move. Bringing it all together in one company offering is the key differentiating factor with Moving Simplified. "We are changing the face and perception of the moving company stereotype one move at a time," says Snider. "We do this everyday by holding ourselves to a higher standard of service, people skills and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Ben_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Ben Simmons</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Ben joined Moving Simplified in 2009 as one of the first management team members. Ben's entrepreneurial spirit and physical fitness background makes him an excellent team player and role model. "We're working hard everyday to help change the perception and face of the moving business," says Simmons. "It can only be accomplished through discipline, desire and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Tim_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Timothy Browne</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Tim joined Moving Simplified in 2009 as a team leader and manager. Tim has a professional service background that was a natural catapult into Moving Simplified. "As a crew leader and senior manager, I have a responsibility to ensure that our customers are 100% satisfied with our moving team's presentation, ability and performance," says Browne. "Our goal is to be the area's top moving services provider and we strive to deliver that top-tier level of service with every customer."
</p>
</div>
Here is the css:
.profile { width: 630px; padding-bottom: 20px; }
#mainContent .profile h3 { margin-top: 10px; }
#mainContent .profile p { float: left; width: 350px; }
.profile img { float: right; }
.gray-line { clear: both; }
It shows up fine in Safari and Firefox but in IE7 it is nowhere to be seen.
Thanks for any help!
Are the images that don't show all in the same folder? Try renaming the folders to a name without an underscore _ at the start.
By the way, the images don't show in my Firefox nor IE8.
Related
I have uploaded all the files to my web server (I use NameCheap, cPanel).
This is my webpage: www.gloriachen.me
In the landing page, my html and css are:
<!-- Landing Page -->
<div class="container-fluid">
<img src="assets/landing-page.JPG" class="img-fluid" alt="Responsive image" style="width:100%;">
<div class="top-left">
<p> <span>Hi, </span>I am Gloria Chen. I am currently a recent graduate from Australian National University (ANU)
with a master’s degree in computer science. As an enthusiastic fan of front-end development
at the moment, I am keen to look for a job on Web/App front-end development.
</p>
<p> This is my personal blog website. Initially I developed this site for practicing my
front-end skills, especially in programming. I used HTML, CSS, BootStrap 4, JavaScript
as the main languages for building my site, and would like to use Vue.js or Angular.js
for front-end framework building.
</p>
<p> It’s not easy for me to look for jobs right now at the moment, one reason is because
I just finished a surgery of a chest wall tumour removal on this September. For almost
about one and a half month, I was in the process of recovering from the treatment and
procedure. Luckily, my pathology report of the removed tumour is positive, which means
I can still be alive :). I thank God for his preserving. But now I really need to gradually
restore my mind, emotion, will and motivation, and really devote myself into working again.
</p>
<p> Things are not always easy, but I believe I will get a suitable one soon :) </p>
</div>
</div>
/* Text CSS */
.container {
position: relative;
text-align: center;
color: white;
}
.top-left{
width: 50%;
position: absolute;
top: 150px;
left: 70px;
line-height: 2;
}
The text is supposed to be on the top of the image. I tried on my local, and it was successful, like this:
After I upload all my files to the NameCheap cPanel. However, it doesn't work in Safari. If I open the site using Safari, the text won't be on the top of the image. The landing page would be like this:
Anyone knows what is the reason of it and how can I solve the problem here?
Thanks in advance!
It looks correct for me when clicking your click.
Try clearing your browser cache, or holding Shift while clicking the refresh button to perform a hard-refresh, which should force new css to load.
Check the path to your CSS file. your path to the CSS file might not be correct.
this is my webpage http://www.noor-azmi.com/element/company.html
As you can see, there are 2 grey boxes on top. I do not want the gap in between them. I want it to be combined into 1 rectangle box.
They are both in different columns the left one is col-8 and the right one os col-4. When i checked in the browser, it seems there is a 15px padding each between them.
I am ok with the padding but can the padding also have the same BG colour ? Then that will solve the issue. Thanks
Seperate grey part into another row and you are good to go.
<div class="row">
<div class="our_company col-sm-8">
<h2>Our Company</h2><br>
<p>As the name indicates, Element Design Studio is a boutique design studio that provides landscape master planning and full serviced landscape architecture services for hotels, resorts, residential developments, mixed-use projects and golf course landscapes. Headquartered in Singapore, Element was co-founded by Gregory Kunak in 2011 based on simple and straightforward fundamentals; to provide Clients with the highest quality design services.<br><br>
Since 2011, Element has provided design services for a vast amount of projects located in 16 countries, consisting of Bangladesh, Egypt, Guinea, India, Indonesia, Laos, Kenya, Korea, Malaysia, Mauritius, Nepal, Saudi Arabia, Seychelles, Singapore, Sri Lanka and Vietnam. <br><br>
Whether appointed to provide landscape master planning services on a 100 hectare mixed-use development or engaged to provide detailed landscape design services for a hotel, resort or luxury residential condominium, Element takes immense pride with providing the highest quality of design excellence throughout every stage of the project. Above all, it is our fundamental goal to ensure that our Clients achieve a successful landscape product.</p><br>
</div><div class="our_leader col-sm-4">
<h2>Our Leadership</h2><br>
Gregory Kunak<br>
<h3>Managing Director</h3>
<img src="image/Gregory-Kunak-Profile.jpg">
<p>After working for 20 years with two of the largest and most prominent landscape architecture firms in the United States and Singapore, Gregory Kunak co-founded Element in 2011.<br><br> Through his career, Gregory has gained extensive design experience on many notable hotels, resorts, residential developments and mixed-use projects throughout the United States, Caribbean, Middle East and majority of Asia. As Managing Director of Element, Gregory is responsible for every aspect of the company.<br><br> As a registered landscape architect, Gregory is responsible for ensuring that each and every project adheres to the most stringent health, safety and welfare standards while striving to achieve design excellence. He is a rollercoaster enthusiast, enjoys the outdoors and horticulture and supports the Pittsburgh Steelers. </p></div>
</div>.
Try this,
You need to make change in you div
HTML Code:
<div class="row">
<div class="col-md-12 bg-grey">
<div class="col-md-8">
This is col 1
</div>
<div class="col-md-4">
This is col 2
</div>
</div>
</div>
CSS Code:
.bg-grey {
background-color: grey;
}
In my div container, many <p> elements take up so much space, that they leak out of my 'position: fixed;' div element. This is expected, so I want to implement a scroll bar on the right of the div element to help readers scroll down the text.
However, I have no idea how to implement that.
here's what I have:
#rdiv2
{
left:20%;
right:20%;
width:60%;
height:80%;
top:15%;
position:fixed;
}
<div id="rdiv2">
<article id="article1">
<h1>Resume</h1>
<p>Adan Ramirez</p>
<p>Summary</p>
<p>Highly dependable, experienced employee and enthusiastic team player dedicated to deliver the</p>
<p>most out of my employment. Fluent in English and Spanish.</p>
<p>Highlights:</p>
<p>Computer hardware troubleshooting</p>
<p>1 Year IT Level 1 help desk support</p>
<p>Network configuring/troubleshooting</p>
<p>Team Player</p>
<p>Sociable and willing to work with just about everyone</p>
<p>CompTIA Security+ Certified-AS in Information Technology 2014</p>
<p>Windows 7, Dell-OptiPlex Desktops, MS Office, Adobe/Java support</p>
<p>Experience:</p>
<p>Spent many years working with technology at home as a passion.</p>
<p>Currently employed at Oxnard College as IT specialist.</p>
<p>I get to work with many people in Oxnard College, social skills is what I have.</p>
<p>I do just about everything in Level 1-2 Tech support</p>
<p>School internship-Cooperative Work Experience 1.0 Credits, 60 hours were completed:</p>
<p>I got to install switches and routers in their racks.</p>
<p>Then we installed power supplies for our switches and routers.</p>
<p>We also made wall configurations to hang our Ethernet cables.</p>
<p>Did basic maintenance of the room, such as cleaning, organizing.</p>
<p>I made RJ-45 cables, tested them, and deployed them.</p>
<p>I bypassed cisco switches/routers and basic configurations.</p>
<p>I installed a new image on a PC.</p>
<p>I installed PSU’s, did some basic maintenance.</p>
<p>Education</p>
<p>Oxnard College:</p>
<p>Associate of Science: Computer Network IT 2014</p>
<p>Cisco Certificate of Achievement 2014</p>
<p>Certifications:</p>
<p>CompTIA Security+</p>
</article>
</div>
Add overflow-y: scroll; to the CSS for #rdiv2. The <div> will be then only be as high as the height that you set.
In your CSS, simply add
overflow-x:scroll;
overflow-y:scroll;
I've the below html code with divs as column creators and separators, here when i run this in my web browser, it is creating an overlapping of data or the columns are not getting properly aligned. here actually i want a 3 column layout where in there would be an image in the first and second column top part. you can find the document how it should look like here and the fiddle Here. and also i don't want to use table here, just divs should do it. please let me know where am i going wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.columns
{
width: 508.326px;
height:709.268px;
}
div.left {
width:341px;
height:709.268px;
border-right:dotted;
float: left;
}
div.right {
width:167px;
height:709.268px;
float: right;
margin-left: 10px;
}
div.white
{
width:188px;
float:left;
height:436.86px;
}
div.grey
{
width:188px;
float:right;
height:436.86px;
}
div.red
{
width:217px;
}
</style>
</head>
<body>
<div class="columns">
<div class="left">
<div class="image">
<img src="../Magazines/Images/Images.jpg" height="380" width="380"/>
</div>
<div class="white" >The English historian Lord Acton
famously said the “issue which has
swept down the centuries and which
will have to be fought sooner or later is
the people versus the banks”.
This cannot ring truer than now, with
many banks, particularly the biggest
ones, in the public spotlight facing
a wide range of investigations and
litigations, following the 2007-2008
global financial crisis. And as Mr.
Longo puts it, that is all just part of
doing business at the moment if you
are a financial institution such as
Deutsche Bank.
“Since the GFC (global financial
crisis), the industry has gone through
tremendous change on a variety of
fronts,” he tells Hong Kong Lawyer
one grayish morning last month in
Thomson Reuters’ office in Central.
“So we have to deal with investigations
and litigations on the one hand, and
on the other hand adapt our model
to see how we can reorganise and
restructure the institution to comply
with the variety of regulatory changes
as well as develop existing and new
business opportunities to replace
income streams that are no longer
viable.” </div>
<div class="grey">And to make it even more challenging,
a grayish macro-economic backdrop
where the economy remains weak in
Europe while recovering slowly in the
US.
“There are also challenges driven by the
plethora of reforms coming out of the
G20 commitments and demographics
and urbanisation, a whole range of
things… It is an interesting time to be in
banking,” he says with a laugh. The 53
year old should know, given that he was
once a key member of the Australian
Securities and Investments Commission,
responsible for enforcement.
The way that Mr. Longo sees it, how
the universal banking model changes
following the crisis will dictate the
future of banking. For instance, a key
discussion has been whether retail
banking activity should be separated
from trading and investment banking
activity.
“It’s a Glass-Steagall-type discussion,”
he continues, referring to the US
Banking Act of 1933, which separated
commercial and investment banking
components. It was passed during the
Great Depression in the 1930s. Sections
of it were repealed in 1999 partly to</div>
</div>
<div class="right">
<div class="red" >allow for the merger of retail banks
and investment banks that engage in
underwriting and dealing in securities
as banking operations.
“Some people argue that if we want to
protect the public purse, we need to get
so called ‘ risky’ investment banking
activity away from deposit-taking
activity that is seen as a public good.
That doesn’t seem to be happening in
the US, while that is happening in the
UK, with continued questioning in the
rest of Europe, generally, about whether
to do that.”
Before and after the GFC
The main difference before and after the
crisis, says Mr. Longo, is growth.
“Everybody was growing, hiring, legal
departments were growing,” he recalls.
“Since the crisis, there have been
enormous changes in how we think
about (things like) headcount,
resources, cost efficiency , adapting to
a new environment… Managing in that
environment is different from managing
in an environment where there is lots of
growth, hiring, and all of that.”
For instance, while he used to spend
more time on banking transactions in
the early days after joining Deutsche
Bank in 2002, Mr. Longo now often
finds himself dealing with managing a
range of regulatory issues and strategy .
Lawyers thinking of going in-house in a
bank now can also expect to deal with
a huge increase in regulatory work “to
develop responses to, and implement,
the immense amount of new global
bank and financial institution reforms”,
he says. These include “responding to
Dodd-Frank (Act) and Volcker (Rules)
from the US, the European Market
Infrastructure Regulation (EMIR), Living
Wills and Resolution plans, and the OTC
(over-the-counter) derivative reforms
and central clearing initiatives”.</div>
</div>
</div>
</body>
</html>
Thanks
Check out this fiddle and let me know if this is what you want.
I have made the following changes:
In your CSS the width of the left section was smaller than the sum of what was set for the white and grey divs and this was making the grey div to wrap-around (which is fall below). This was making your text overlap. Remember that the sum of the widths of the inner divs must be less than that of the container div for them to be displayed properly.
For your case we can split them just by using display: inline-block; rule itself and hence I have avoided the float rule settings. If you want to stick with floats, you can check this version.
I have rounded off the height setting to the nearest whole number just for example. You can modify this as required.
div.columns {
width: 670px;
height:710px;
}
div.left {
width:440px;
height:710px;
border-right:dotted;
display: inline-block;
}
div.right {
width:210px;
height:710px;
display: inline-block;
margin-left: 10px;
}
div.white {
width:215px;
height:100%;
border-right:dotted;
display: inline-block;
vertical-align: top;
}
div.grey {
width:215px;
height:100%;
display: inline-block;
}
.image {
height: 390px;
width: 100%;
}
Live site.
After testing a site I'm working on, I've discovered a weird break that occurs only in Chrome and Safari. Everything looks fine in Firefox.
Welcome to BodywoRx
<div class="banner-image">
<img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
</div><!-- end banner-image -->
<p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy. In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself. We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
<div class="bio">
<img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
<p>Bridgett suffered from chronic neck, back, and shoulder pain for many years. She went to many doctors, specialists, had many MRI's, but no one knew what was causing the pain. She had been prescribed countless medications to help ease discomfort, but nothing to address the cause. Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties. Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
</div><!-- end bio -->
</div><!-- end about -->
I'm sure it's something minor, I just can't quite figure it out. Any ideas? Thank you.
Try using float on the second image.
.bio img {
float: left;
}
JS Fiddle: http://jsfiddle.net/J4MK4/2/
Is the text suposed to be to the right of the image?
If so, you need to float the image.
img {
float: left;
}